Прежде чем углубляться в длинный ответ 👩‍🏫, давайте посмотрим, почему размер таблицы стилей является одним из наиболее важных факторов с точки зрения работы в Интернете.

В общем, таблица стилей - это просто набор правил / селекторов, которые можно определить в:

  • Внешние файлы.
  • Теги стиля.
  • Атрибуты встроенного стиля.

✍️ Существует много дискуссий о плюсах и минусах каждого подхода, и это выходит за рамки данной статьи, но если вам интересно, вы можете прочитать здесь.

Чтобы браузер отображал веб-страницу, он должен построить деревья DOM (наш HTML) и CSSOM (наши таблицы стилей), как показано на рисунке ниже. Это означает, что создание CSSOM - это блокировка рендеринга, поэтому, чем больше размер файла и чем больше у нас правил CSS, тем медленнее работает наш веб-сайт 🤷‍.

Итак, давайте начнем наше путешествие по прореживанию таблицы стилей. На мой взгляд, мы можем разделить на две категории:

  • «Уменьшение» таблицы стилей.
  • Удаление неиспользуемых селекторов CSS.

✍️ Я цитирую уменьшение, потому что не могу найти более подходящего слова для описания того, что он делает в следующем разделе.

Уменьшение

Что такое минификация? В этом разделе он выполняет две разные функции:

  • Выполните преобразования (он же CSS Minifier).
  • Вырезание имени класса css.

CSS Minifier

CSS Minifiers в основном делают три вещи:

  • Очистка (удаление повторяющихся / пустых правил и комментариев).
  • Сжатие (более короткая форма для цвета, шрифта, фона).
  • Реструктуризация (объединение деклараций, наборов правил и т. Д.).

Изображение ниже - эталон минификаторов CSS.

📕 Худшее - 📓 Среднее - 📗 Лучшее

Как показано на изображении выше, существует множество минификаторов css, я рекомендую вам использовать cssnano или csso, два самых популярных минификатора CSS с точки зрения функций и экосистемы. Вы можете использовать их в сборщике модулей через:

Вырезание имени класса css

Если вы проникнете на HTML-страницу Gmail (то же самое для других платформ Google: G +, Driver…), вы увидите что-то вроде этого

Выглядит слишком некрасиво 💩, правда? поскольку у него нет значимых имен классов, нас учили, что мы должны использовать значимые имена при программировании, чтобы улучшить читаемость и удобство сопровождения, это противоречит этому. Почему Google это делает? Поскольку более короткое имя класса означает:

  • меньший размер ⟷ меньше байтов до доставки ⟷ наш сайт быстрее 🎉.
  • быстрее при запросе правила 🎉.

Проблема, которую нам нужно решить, чтобы добиться того, чего мы хотим:

  • Сохранение значимого имени класса при разработке для простоты отладки → мы просто следуем лучшим практикам (BEM, SMACSS, OOCSS…) или вашему собственному правилу, если это согласованность в вашей команде 🔪.
  • Вывод уродливого / самого короткого имени класса на продакшене для облегчения доставки и быстрой загрузки ← вот этот сложный 🏋️‍.

Вывод уродливого / самого короткого имени класса: нам нужен инструмент, который преобразует имена классов, а также поддерживает их синхронизацию в других местах при компиляции исходного кода. В настоящее время я использую Webpack, к счастью, один из загрузчиков Webpack с именем css-loader имеет встроенную функцию getLocalIdent, которая помогает нам преодолеть это препятствие.

Если вы знакомы с конфигурацией webpack, это простая версия имени инкремента 0, 1, 2 ... 💣

В том-то и заключается идея, что вы можете написать лучшую версию, чем я, верно? 😜

Удаление неиспользуемых селекторов CSS

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

  • Время выполнения: запустите свою веб-страницу, просканируйте файлы HTML, CSS и js, чтобы проверить, какие селекторы используются в HTML / javascript. Из используемых селекторов вы / tools можете исключить их и получить неиспользуемые селекторы.
  • Время сборки: с помощью сборщика модулей мы можем импортировать файлы CSS и указать, какие селекторы. Основываясь на этой информации из сборщика модулей, мы можем обнаружить неиспользуемые селекторы (звучит просто, правда? 🤷‍).

Время выполнения

Есть три популярных способа проверить неиспользуемые селекторы CSS:

  • Командная строка: вы запускаете командную строку с указанием местоположения файлов CSS / HTML / js, поскольку ввод и вывод используются / не используются CSS. Инструментов много, но purgecss, uncss и purifycss - три самых популярных.
  • Веб-сайт: очень похоже на Командную строку, но на веб-сайте. Вы вводите URL своего Webpack, и он выполняет свою работу 👊.
    Например: https://www.jitbit.com/unusedcss/, https://unused-css.com/, https: //uncss-online.com/ …
  • Покрытие кода Chrome: на изображении ниже показано покрытие кода не только для файлов CSS, но и для файлов js.

Как открыть покрытие кода:

  • Шаг 1. Откройте Инструменты разработчика Chrome.
  • Шаг 2: нажмите Cmd + Shift + P (Mac) или Ctrl + Shift + P (Windows, Linux), введите Coverage

  • Шаг 3. Нажмите кнопку записи.

Время сборки

Как я уже упоминал выше. Звучит просто, правда? Да, это будет очень просто, если ваш сборщик модулей поддерживает именованный экспорт, в противном случае это может быть сложно 🤯. В настоящее время я использую Webpack, и, к сожалению, Webpack и его экосистема (css-loader) не поддерживают именованный экспорт, потому что переход с commonjs на es6 named exports является критическим изменением, вы можете понять, почему, через этот поток.

Чтобы подняться на крутой холм, нам нужно сделать два шага:

  • Шаг 1: Поддержка статического импорта / экспорта для css ← es6-css-loader (он основан на официальных загрузчиках Webpack с именами style-loader и mini-css-extract-plugin.
  • Шаг 2: подключаемый модуль для подключения к процессу сборки Webpack для отображения неиспользуемых селекторов CSS ← webpack-deadcode-plugin.

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

При запуске демонстрации результат выглядит как на изображении ниже.

Заключение

После применения этих решений размер нашего пакета CSS в Bokio уменьшился с 286 КБ до 130 КБ, даже если мы еще не применили удаление неиспользуемых селекторов во время сборки. Я обновлю наш окончательный результат, когда мы закончим оптимизацию 🤞.

✍️ Оба числа - 286 КБ и 130 КБ - рассчитываются до сжатия (например, gzip, brotli…).

Ресурсы