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

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

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

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

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

Но как?

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

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

Если вы используете модули CSS, ваши модули CSS, вероятно, будут включать имя файла таблицы стилей, имя локального идентификатора и случайный хеш. Шаблон имени класса описывается с помощью конфигурации css-loader localIdentName, например [name]___[local]___[hash:base64:5]. Следовательно, сгенерированное имя класса будет выглядеть примерно так .MovieView___movie-title___yvKVV; если вам нравятся описательные имена, они могут быть намного длиннее, например .MovieView___movie-description-with-summary-paragraph___yvKVV.

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

Однако, если вы используете webpack и babel-plugin-react-css-modules, вам повезло 🍀 - вы можете переименовать имена классов во время компиляции, используя конфигурацию css-loader getLocalIdent и эквивалентный babel- plugin-react-css-modules generateScopedName конфигурация.

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

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

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

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

Это гарантирует короткие и уникальные имена классов. Теперь вместо .MovieView___movie-title___yvKVV и .MovieView___movie-description-with-summary-paragraph___yvKVV имена наших классов стали .a_a, .b_a и т. Д.

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

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

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

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

Чтобы использовать это, используйте csso-webpack-plugin для пост-обработки пакета CSS:

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

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

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

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

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

Вы можете мне помочь с GO2CINEMA?

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

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

Ты любишь читать, я люблю писать

Вы можете поддержать мою работу с открытым исходным кодом и меня в написании технических статей через Buy Me A Coffee и Patreon. Моя вечная благодарность