Автор оригинала: FreeCodeCamp Community Member.
Gajus kuizinas.
Так же, как 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 местный язык Конфигурация, например [ИМЯ] ___ [LOCAL] ___ [HASHH: BASE64: 5] Отказ Поэтому сгенерированное имя класса будет выглядеть что-то вроде этого .Movieview ___ Фильм-титул ___ YVKVV ; Если вам нравятся описательные имена, он может получить намного дольше, например .Movieview ___ Фильм-описание-с-Сводка - абзац ___ YVKVV Отказ
Переименованные имена классов CSS при время компиляции
Однако, если вы используете WebPack и Babel-Plugin-React-CSS-модули тебе повезло? – Вы можете переименовать названия классов при время компиляции, используя C SS-Loader G Этлокалидента Конфигурация и эквивалентные Babel-Plugin-React-CSS-модули G EneryateCopedName конфигурация.
Прохладная вещь о GenerateCopedName Это тот же экземпляр функции может быть использован для процесса сборки Babel и WebPack:
Делать названия короткие
Благодаря Babel-Plugin-React-CSS-модули и CSS-Loader Обмен одной и той же логикой для генерации названий классов CSS мы можем изменить имена классов на все, что нам нравится, даже случайное хеш. Однако вместо случайных хэш я хотел, чтобы максимально возможные названия классов.
Чтобы сгенерировать самые короткие имена классов, я создал индекс имени класса и использовал инкстр Модуль для генерации инкрементных идентификаторов для каждой записи в индексе.
Это гарантирует короткие и уникальные имена классов. Теперь вместо .Movieview ___ Фильм-титул ___ YVKVV и .Movieview ___ Фильм-описание-с-Сводка - абзац ___ YVKVV Наши названия классов стали .a_a , .b_a , так далее.
Это уменьшило Go2cinema Размер комплекта CSS от 140 Kb до 53 КБ.
Использование выделения области для дальнейшего уменьшения размера расслоения
Есть веская причина, по которой я добавил _ В название класса CSS, отделяющее имя компонента и название локального идентификатора – различие полезно для минификации.
CSSO (CSS Minifier) имеет СКОРОЙ конфигурация. Сцены определяют списки названий классов, которые используются исключительно на некоторой разметке, то есть селекторы из разных областей не соответствуют одному и тому же элементу. Эта информация позволяет оптимизатором перемещать правила более агрессивными.
Использовать это, используйте CSSO-WebPack-Plugin Чтобы пост-процесс CSS Bundle:
Это уменьшило Go2cinema Размер комплекта CSS от 53 КБ до 47 КБ.
Стоит ли оно того?
Первый аргумент против такого заминирования заключается в том, что алгоритмы сжатия сделают это для вас. GO2CINEMA CSS BUNDLE сжимается с помощью Броти Алгоритм экономит всего 1 КБ по сравнению с исходным связью с именами длинных классов.
С другой стороны, настройка этой зачисления – одноразовая инвестиция, и это уменьшает размер документа, который должен быть проанализирован. Он имеет другие преимущества, такие как сдерживающие лопаты, которые полагаются на имена классов CSS для навигации или случайно совпадающих селекторов CSS-блокатора Черные списки Отказ
Между тем, вы можете увидеть демонстрацию этой минификации, используемую на страницах кино и места проведения GO2CINEMA, например,
- https://go2cinema.com/movies/wonder-woman-2017-1305237
- https://go2cinema.com/venues/odeon-oxford-magdalen-st-1001053
Можете ли вы помочь мне с Go2Cinema?
Go2cinema мой ребенок. Я люблю работать над этим? Тем не менее, это мой первый запуск этого десятилетия, и есть много вещей, с которыми мне нужна помощь.
Если вы можете дать отзывы, консультации SEO, бизнес-консультации, знаете инвестору Angel, знаете кого-то, кто может написать статью о Go2cinema Сделайте твит, пригласите меня на конференцию, радиокуплений и т. Д. Или просто хотите выразить свою поддержку/любопытство и сказать «Привет!», напишите мне на Gajus@gajus.com или DM через Twitter, https://twitter.com/kuizinas Отказ
Вы любите читать, я люблю писать
Вы можете поддержать мои Работа с открытым исходным кодом И я пишу технические статьи через Купи мне кофе и Парреон Отказ У тебя будет моя вечная благодарность?