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

[kafeman]

почему webpack не ужимает имена классов

Потому что не имеет смысла. У Гугла, мне кажется, так просто исторически сложилось.

[edejin]

Не скажите.
Я тут прошелся Google Closure Stylesheets по
https://habracdn.net/habr/styles/1480427855/_build/global_main.css
И получил 155KB против 207KB и это только стили без скриптов и объемов респонса, т.к. хабр не SPA.
А вот для SPA это был бы отличный профит.

[kafeman]

А теперь пройдитесь еще раз, только в этот раз учтя компрессию. Выигрыш будет незначительным, если будет вообще.

[edejin]

Вы правы, не спорю.
С зипом профит только по CSS 5KB.

[edejin]

И 3KB (в зипе) на HTML конкретно этой страницы.
Сколько там у хабра заходов в день…

[vintage]

Что капля в море, что стакан в океане — погоды они не делают.

[kafeman]

Стоит ли париться из-за этих 8 Кб, 5 из которых будут закешированны? Всякие картинки весят значительно больше, вот с них и стоит начать оптимизизацию.

Хотел провести эксперимент сам, но closure-compiler ругается на 79 ошибок Хабра. Вы, вероятно, его с какими-то особыми флагами запускаете, чтобы успокоить?

[edejin]

Как-то так:
java -jar ~/Загрузки/closure-stylesheets.jar --output-renaming-map-format CLOSURE_UNCOMPILED --rename CLOSURE --allow-unrecognized-properties --allow-unrecognized-functions --output-renaming-map renaming_map.js ~/Загрузки/global_main.css -o ./out.css

Советую отпритепринтить.

И вот это он точно не схавает.
charset removed in .../global_main.css at line 1 column 1:
charset «UTF-8»;
^

unknown @ rule in .../global_main.css at line 2 378 column 1:
@-moz-document url-prefix() {
^

GSS constant not defined: MS in .../global_main.css at line 8 314 column 28:
font-family: Trebuchet MS
^

3 error(s), 0 warning(s)

[lexich]

Ну можно использовать css-modules и правильно настроить генерацию имен классов, но как уже обсудили выше — это неуловимый Джо.

[Akuma]

Для проекта с посещаемостью меньше Google, Facebook и аналогичных, это бессмысленная трата времени и сил разработчика, а так же большие шансы напороться на ошибку в JS.

Когда-то уже обсуждалось, что гугл таким образом может существенно экономить трафик, т.к. 1 Кб экономии при миллиарде просмотров экономит почти 1 Тб трафика, что довольно неплохо. Но вот «обычному» проекту с посещаемостью пусть даже 100000 в сутки — это экономия на спичках.

[imater]

Читаемость важнее. Вспоминайте это при строительстве велосипедов.

[3axap4eHko]

а как вы решаете вопрос при манипуляции классами из js? Например я через classList.toggle переключаю класс или classList.add добавляю его. учитывает ли это оптимизатор?

[edejin]

ну например у вас было:

elem.classList.toggle("you");

А теперь вы должны написать:

elem.classList.toggle("___you__");

А в результате получилось:

elem.classList.toggle("a");

Т.е. все что вам нужно, вне зависимости от фрейворка — просто обносить классы подчеркиваниями.

Если я конечно, с просони, правильно понял ваш вопрос.

[jbubsk]

Боюсь представить, что бы мне ответила команда, если бы я предложил им: «коллеги, а может попробуем это?»

[knotri]

Да почему мрак? Если пользоватся БЕМ-ом — там огромные именна классов (пусть и которые хорошо жмутся gzip).

[edejin]

Простите, а можно пример поломки javascript? По возможности кусок сорца.

[edejin]

А у меня для вашего примера получилось.
Вот так:

<a href="#" ng-class="{___selected__: ctx.counter > 5}"/>

Я три часа как начал читать, что такое Angular, и видимо что-то делаю не правильно…
Добавил в сталью пример для Angular.

[vtrushin]

Вы предлагаете обернуть, почему-то несбалансированным количеством андерскоров (слева 3, справа 2), все классы только для того, чтоб сэкономить копейки кода? Взамен получаете трудночитаемые стили (учитывая еще, что в бэме тоже используется __ и _) и очень большую вероятность ошибки в количестве андерскоров. Ну и конечно же трудночитаемость коснется и хтмла