1. Так же, как это делает Google
2. Недостатки минифайеров CSS
3. Переименование имен классов CSS во время компиляции
4. Делая имена короткими
5. Использование изоляции Scope для дальнейшего уменьшения размера пакета
6. Стоит ли оно того?
7. Можете ли вы помочь мне с GO2CINEMA?
8. Вы любите читать, я люблю писать

В начале этого года я бросил консалтинг и начал строить GO2CINEMA - Быстрый, простой и безопасный способ забронировать билеты в кино в Великобритании. Я проделал великолепную работу, сделав это быстро, просто и безопасно . Где-то на этом пути я стал одержим критической оптимизацией пути рендеринга ⚡️.

Я решил предварительный рендеринг HTML с помощью ūsus , Усус отображает HTML одностраничных приложений (SPA) и вставляет CSS используемый для отображения страницы , Однако мне не понравилось встраивать 70 КБ в каждый HTML-документ, особенно. большая часть это имена классов CSS.

Так же, как это делает Google

Вы когда-нибудь заглядывали в исходный код https://www.google.com/ ? Первое, что вы заметите, это то, что имена классов CSS не длиннее пары символов.

google.com HTML

Но как?

Недостатки минифайеров CSS

Есть одна вещь, которую минификатор не может сделать - изменить имена селекторов. Это связано с тем, что минимизатор CSS не контролирует вывод HTML. Между тем имена CSS могут стать длинными.

Если вы используете модули CSS, ваши модули CSS, скорее всего, будут включать имя файла таблицы стилей, имя локального идентификатора и случайный хеш. Шаблон имени класса описывается с помощью CSS-погрузчик localIdentName конфигурация, например, [имя] ___ [локально] ___ [хеш: base64: 5]. Поэтому сгенерированное имя класса будет выглядеть примерно так .MovieView ___ movie-title ___ yvKVV; если вам нравятся описательные имена, он может стать намного длиннее, например .MovieView ___ movie-description-with-summary-абзац ___ yvKVV.

Переименование имен классов CSS во время компиляции

Однако, если вы используете WebPack а также Бабель-плагин-реагирующий-CSS-модули , вам повезло 🍀 - вы можете переименовать имена классов во время компиляции, используя CSS-погрузчик getLocalIdent конфигурация и эквивалентные babel-plugin-реагировать-css-модули generateScopedName конфигурации.

Крутая вещь в generateScopedName заключается в том, что один и тот же экземпляр функции можно использовать для процесса сборки Babel и webpack:

Делая имена короткими

Благодаря babel-plugin-реагировать-css-modules и css-loader, использующим одну и ту же логику для генерации имен классов CSS, мы можем изменить имена классов на любые, что нам нравится, даже на случайный хеш. Однако вместо случайного хэша я хотел получить кратчайшие имена классов.

Чтобы сгенерировать кратчайшие имена классов, я создал индекс имени класса и использовал incstr модуль для генерации дополнительных идентификаторов для каждой записи в индексе.

Это гарантирует короткие и уникальные имена классов. Теперь вместо .MovieView ___ movie-title ___ yvKVV и .MovieView ___ movie-description-with-summary-абзаца ___ yvKVV наши имена классов стали .a_a, .b_a и т. Д.

Это уменьшило GO2CINEMA Размер CSS-пакета от 140 КБ до 53 КБ.

Использование изоляции Scope для дальнейшего уменьшения размера пакета

Есть веская причина, по которой я добавил _ в имя класса CSS, разделяя имя компонента и имя локального идентификатора - это различие полезно для минимизации.

csso (CSS minifier) ​​имеет прицелы конфигурации. Области определяют списки имен классов, которые используются исключительно в некоторой разметке, т.е. селекторы из разных областей не соответствуют одному и тому же элементу. Эта информация позволяет оптимизатору продвигать правила более агрессивно.

Чтобы использовать это, используйте csso-WebPack-плагин для последующей обработки пакета CSS:

Это уменьшило GO2CINEMA Размер CSS-пакета от 53 КБ до 47 КБ.

Стоит ли оно того?

Первый аргумент против такого минимизации заключается в том, что алгоритмы сжатия сделают это за вас. Пакет GO2CINEMA CSS сжат с использованием Brotli алгоритм экономит всего 1 КБ по сравнению с исходным комплектом с длинными именами классов.

С другой стороны, настройка этого минимизации является однократным вложением, и это уменьшает размер документа, который необходимо проанализировать. У него есть и другие преимущества, такие как предотвращение написания документов, использующих имена классов CSS для навигации или случайного соответствия селекторов CSS блокировщика рекламы. Черные списки ,

Между тем, вы можете увидеть демонстрацию этой минификации, которая используется на страницах фильмов и мест проведения GO2CINEMA, например:

Можете ли вы помочь мне с GO2CINEMA?

GO2CINEMA мой ребенок Я люблю работать над этим 😍. Тем не менее, это мой первый стартап в этом десятилетии, и есть много вещей, с которыми мне нужна помощь.

Если вы можете дать обратную связь, совет SEO, бизнес совет, знать инвестора ангела, знать кого-то, кто может написать статью о GO2CINEMA , напишите в Твиттере, пригласите меня на конференцию, ток-шоу по радио и т. д. или просто хотите выразить свою поддержку / любопытство и сказать «Привет!», напишите мне по адресу [email protected] или DM через Twitter, https://twitter.com/kuizinas ,

Вы любите читать, я люблю писать

Вы можете поддержать мой работа с открытым исходным кодом и я пишу технические статьи через Купи мне кофе а также Patreon , Вы будете иметь мою вечную благодарность 🙌