Как удалить неиспользуемый CSS при создании сайта на Astro

При создании сайта с использованием библиотек построения интерфейса разработчик часто сталкивается с тем, что значительная часть подключённого CSS остаётся невостребованной. Например, сжатый CSS одной из самых популярных библиотек Bootstrap (на текущий момент версия 5.2.3) весит 195 Кбайт. На примере этого сайта, после удаления неиспользованного CSS осталось менее 25 Кбайт, что в 8 раз меньше первоначального размера.

Так как CSS загружается в первую очередь, его большой размер отрицательно влияет на скорость загрузки страниц и, как следствие, на SEO-оптимизацию сайта. Для решения этой проблемы, среди интеграций Astro, можно найти готовый плагин astro-purgecss, который использует популярную библиотеку PurgeCSS. Плагин сканирует шаблоны проекта на завершающем этапе сборки сайта и автоматически вырезает из него весь неиспользуемый CSS.

Установить плагин можно выполнив команду из корня проекта:

# terminal
npx astro add astro-purgecss

Чтобы убедиться, что плагин работает правильно, рекомендуется поместить purgecss() в качестве последнего элемента в массиве интеграций конфигурации Astro:

// astro.config.mjs
import { defineConfig } from "astro/config";
...
import sitemap from "@astrojs/sitemap";
import purgecss from "astro-purgecss";

export default defineConfig({
  ...
  integrations: [
    ...
    sitemap(),
    purgecss()
  ]
});

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

Для таких случаев в плагине предусмотрена возможность явного указания списка селекторов, которые необходимо сохранить в CSS сайта:

// astro.config.mjs
import { defineConfig } from "astro/config";
...
import sitemap from "@astrojs/sitemap";
import purgecss from "astro-purgecss";

export default defineConfig({
  ...
  integrations: [
    ...
    sitemap(),
    purgecss({
      safelist: ["navbar-scrolled", "navbar-moved-up", "was-validated"]
    })
  ]
});