Comments 21
почему webpack не ужимает имена классовПотому что не имеет смысла. У Гугла, мне кажется, так просто исторически сложилось.
Не скажите.
Я тут прошелся Google Closure Stylesheets по
https://habracdn.net/habr/styles/1480427855/_build/global_main.css
И получил 155KB против 207KB и это только стили без скриптов и объемов респонса, т.к. хабр не SPA.
А вот для SPA это был бы отличный профит.
Я тут прошелся Google Closure Stylesheets по
https://habracdn.net/habr/styles/1480427855/_build/global_main.css
И получил 155KB против 207KB и это только стили без скриптов и объемов респонса, т.к. хабр не SPA.
А вот для SPA это был бы отличный профит.
А теперь пройдитесь еще раз, только в этот раз учтя компрессию. Выигрыш будет незначительным, если будет вообще.
Вы правы, не спорю.
С зипом профит только по CSS 5KB.
С зипом профит только по CSS 5KB.
И 3KB (в зипе) на HTML конкретно этой страницы.
Сколько там у хабра заходов в день…
Сколько там у хабра заходов в день…
Что капля в море, что стакан в океане — погоды они не делают.
Стоит ли париться из-за этих 8 Кб, 5 из которых будут закешированны? Всякие картинки весят значительно больше, вот с них и стоит начать оптимизизацию.
Хотел провести эксперимент сам, но closure-compiler ругается на 79 ошибок Хабра. Вы, вероятно, его с какими-то особыми флагами запускаете, чтобы успокоить?
Хотел провести эксперимент сам, но closure-compiler ругается на 79 ошибок Хабра. Вы, вероятно, его с какими-то особыми флагами запускаете, чтобы успокоить?
Как-то так:
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)
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)
Ну можно использовать css-modules и правильно настроить генерацию имен классов, но как уже обсудили выше — это неуловимый Джо.
Для проекта с посещаемостью меньше Google, Facebook и аналогичных, это бессмысленная трата времени и сил разработчика, а так же большие шансы напороться на ошибку в JS.
Когда-то уже обсуждалось, что гугл таким образом может существенно экономить трафик, т.к. 1 Кб экономии при миллиарде просмотров экономит почти 1 Тб трафика, что довольно неплохо. Но вот «обычному» проекту с посещаемостью пусть даже 100000 в сутки — это экономия на спичках.
Когда-то уже обсуждалось, что гугл таким образом может существенно экономить трафик, т.к. 1 Кб экономии при миллиарде просмотров экономит почти 1 Тб трафика, что довольно неплохо. Но вот «обычному» проекту с посещаемостью пусть даже 100000 в сутки — это экономия на спичках.
Читаемость важнее. Вспоминайте это при строительстве велосипедов.
а как вы решаете вопрос при манипуляции классами из js? Например я через classList.toggle переключаю класс или classList.add добавляю его. учитывает ли это оптимизатор?
ну например у вас было:
А теперь вы должны написать:
А в результате получилось:
Т.е. все что вам нужно, вне зависимости от фрейворка — просто обносить классы подчеркиваниями.
Если я конечно, с просони, правильно понял ваш вопрос.
elem.classList.toggle("you");
А теперь вы должны написать:
elem.classList.toggle("___you__");
А в результате получилось:
elem.classList.toggle("a");
Т.е. все что вам нужно, вне зависимости от фрейворка — просто обносить классы подчеркиваниями.
Если я конечно, с просони, правильно понял ваш вопрос.
Боюсь представить, что бы мне ответила команда, если бы я предложил им: «коллеги, а может попробуем это?»
UFO just landed and posted this here
Вы предлагаете обернуть, почему-то несбалансированным количеством андерскоров (слева 3, справа 2), все классы только для того, чтоб сэкономить копейки кода? Взамен получаете трудночитаемые стили (учитывая еще, что в бэме тоже используется __ и _) и очень большую вероятность ошибки в количестве андерскоров. Ну и конечно же трудночитаемость коснется и хтмла
Sign up to leave a comment.
Очередной метод снизить объем SPA приложения (webpack)