Очередной метод снизить объем SPA приложения (webpack)29.11.2016 22:05

Так уж случилось, что в последнее время мне приходится осваивать новые инструменты. Очередным таким инструментом стал webpack.
Инструмент интересный, но после переезда с Google Closure * для меня стало загадкой, почему webpack не ужимает имена классов, как это делает Google Closure Stylesheets.
За день, на коленке, мною был написан plugin который вполне не плохо реализовал этот функционал.
Более подробное описание ниже.

И так начнем с ТЗ. Это делается, во первых, для себя, во вторых, для тех кто еще не понял, что ту происходит, но каким-то образом попал на эту страницу.
Лично я люблю писать большие и красивые длинные имена классов, по которым сразу понятно, что происходит.
Например:

.header {
  position: fixed;
  top: 0;
  ...
}
.header a {
  display: block;
  float: right;
  ...
}
.sidebar {
  float:right;
  max-width: 30%;
  ...
}
.sidebar a {
  font-size: 16px;
  ....
}

Но можно же сократить header до h, a sidebar до s, таким образом сэкономив не мало байт не только в CSS, но и JS файлах, т.к. скорее всего ваш JS будет содержать селекторы по именам классов.
Однако, от такого сокращения будет страдать читаемость кода, а как следствие и скорость разработки. По этому надо создать инструмент для проведения данной замены автоматически.

Небольшое пояснение как это работает в Closure

Google Closure состоит из нескольких инструментов, один из которых Google Closure Stylesheets, который является и препроцессором и постпроцессором для таблиц стилей.
Как препроцессор он аналогичен всем своим собратьям, но больше всего он похож на SCSS/SASS.
Как постпроцессор он парсит имена классов создавая словарь замен и заменяет все имена классов на их короткие обозначения.
На пример, код выше станет:

.a {
  position: fixed;
  top: 0;
  ...
}
.a a {
  display: block;
  float: right;
  ...
}
.b {
  float:right;
  max-width: 30%;
  ...
}
.b a {
  font-size: 16px;
  ....
}

А словарь замен будет:

{
  "header": "a",
  "sidebar": "b"
}

На самом деле функционала там намного больше, но статья не о том.
Есть еще Closure Templates, неплохой шаблонизатор, в котором надо отметить все имена классов специальной директивой, что бы потом применить словарь замен к шаблонам.
Например:
{namespace test}

/**
* Test template
*
*/
{template .test}