Sniper-CSS, избегайте неиспользуемых стилей

Это краткое руководство, в котором я хочу поделиться тем, как я перешел от 212 кБ CSS к 32,1 кБ (сокращение кода на 84,91%), по-прежнему используя сторонние библиотеки стилей

И полностью сохранил эстетику приложения.

Этот пример проекта был сделан с помощью Astro .

Мы пройдем через это:

1. От сторонних CSS до пользовательских CSS.
2. Изучайте и улучшайте другие ресурсы с кодом CSS.
3. Переосмыслите, как писать структуру CSS.

Давайте начнем! ✨

1. От CSS сторонних производителей к пользовательскому CSS, требующему только соблюдения правил.

Использование библиотек стилей (т.е. Bootstrap , Tailwind ) - обычная задача на ежедневной работе Frontend Developer.

Конечно, вы все равно будете их использовать, но вот как я воспользовался ими, чтобы получить прирост в моем App.

Если вы когда-либо пытались улучшить показатели вашего сайта по данным Lighthouse , то вы знаете, что некоторые из рекомендаций, которые вы получаете, это сокращение неиспользуемого кода стилей/скриптов.

DevTools в Chrome также предоставляет действительно интересный инструмент под названием Coverage , который поможет вам узнать, какие участки кода вообще не используются в приложении после полного взаимодействия с вашим приложением*.

*Посмотрите документацию инструмента Coverage, чтобы лучше понять это.

Где мы находимся.

Я расскажу об этом примере с использованием Bootstrap, и первое, что нужно отметить, это то, что я использую его не как зависимость от проекта, а через CDN, и на это есть причина, вы увидите почему.

Давайте быстро вспомним, что мы делаем, используя CDN Bootstrap.

Official Bootstrap's Docs говорит вам установить полный минифицированный пакет (225.97 kB):

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

Но нам не нужна вся библиотека Bootstrap для этого случая, мы просто импортируем то, что нам нужно, поэтому, чтобы увидеть, какой контент вам понадобится, перейдите на страницу доставки корневого CSS CDN:

https://cdn.jsdelivr.net/npm/[email protected]/dist/css/

В моем случае я знаю, что мне нужен только utilities.css (104.09 kB) и grid.css (68.28 kB).

На данный момент мы имеем вот такой Coverage, 92% неиспользуемых стилей.

Это слишком много.

Давайте пока сосредоточимся на Bootstrap.

Вот он 🧙‍♂️ фокус.

Практическая работа

Я с трудом пытался экспортировать только CSS, используемые сайтом... это возможно? было бы здорово, правда?

Ну, я нашел скрытый драгоценный камень, который делает то, что нам нужно!

' Использовал CSS ':

Это так просто использовать, просто откройте свой сайт, нажмите на расширение, пройдитесь по каждому разделу вашего сайта и все, нажмите на кнопку Download CSS. Вы получите файл 'optimized.css'.

// If you are using Astrojs and VSCode too, use this regex to find and replace all the :where(.astro-whatever) with an empty space.
// This will remove all custom clases added by Astro that might broke your styles.
<strong>:where\(\.+([aA-zZ])+-+([aA-zZ])+\)</strong>

Результаты

У нас все еще есть стили Astro по умолчанию, но теперь у нас есть наш файл Sniper-CSS bootstrap_custom.css

Мы начали с 212 кБ стилей, а теперь у нас всего 32,1 кБ. 🔥

Обратите внимание, что в результате мы имеем небольшое увеличение стилей, это потому, что некоторые встроенные коды или локальные стили могут быть продублированы.

2. Пересмотрите и улучшите другие ресурсы CSS-кода.

На скриншотах мы видели, что у нас есть и другие ресурсы CSS, которые мы могли бы улучшить, например, Google Fonts.

Можно ли улучшить импорт Google Fonts? Да, можем.

Посмотрите, что говорит вкладка "Покрытие" об использовании шрифтов Google.

Кажется, что используется все, что угодно, это неправильно, но мы можем видеть, сколько кода бесполезно для нас.

В данном случае, Google Fonts, обеспечивает поддержку Montserrat и MuseoModerno для разных языков.

Проверьте этот вопрос на Quora, чтобы узнать больше или вы можете прочитать, что Google говорит об этом.

Опять же, для этого примера сайта я знаю, что мне не нужна полная поддержка всех языков мира. Только поддержка латыни.

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

Можете ли вы улучшить другие ресурсы, которые использует ваш проект?
Всегда можно улучшить, всегда!

3. Переосмыслите, как писать структуру CSS.

Если вы идете этим путем, улучшая свой CSS, вот несколько советов:

От сервера к локальному контенту.

На этапе разработки вы будете использовать сторонний контент, как это обычно делается, но после завершения проекта вы будете использовать свои собственные CSS-файлы и конфиги, основанные на том, что вы работали с библиотекой.

Имейте это в виду. В идеале это одноразовая задача при попытке улучшить метрики вашего сайта.

Потеряли некоторые правила или нашли повторяющиеся?

Инструмент "Использованный CSS" экспортирует все использованные селекторы CSS и их правила. Но это не все, например, ключевые кадры не экспортируются.

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

Завершение

Давайте сравним, как выглядит покрытие до и после.

До:

У нас было 212 кБ стилей с 92% неиспользуемого кода.

После:

Теперь у нас 32,1 кБ стилей с 26% неиспользуемого кода. 🔥

Мы сократили общее количество CSS на 84,91% 🎉.

И, конечно, его можно сократить еще больше!

Если вы знаете, как сделать так, чтобы на вашем сайте было 0% неиспользуемых стилей, поделитесь своим постом!!!

PD: Эта статья является частью раздела, в котором я буду писать о том, как довести ваше приложение от низкой производительности до очень приличной, используя библиотеки богатых взаимодействий, такие как Threejs, GSAP и Scrollbooster.

Репо проекта: https://github.com/GiustiRo/as-next-astro