Требования: В проекте почти все фронтенд-фреймворки, такие как TailwindCSS, Bootstrap, MaterializeCSS, Foundation и др., мы можем использовать только некоторые стили CSS, а при публикации удалять неиспользованный CSS-код, таким образомУскорить доступ к сайту, сэкономить пропускную способность и использовать память браузераЖдать.
PurgeCSS — это инструмент для удаления неиспользуемого CSS. Это может стать частью вашего рабочего процесса разработки.
При создании сайта вы можете выбрать CSS-фреймворк, такие как TailwindCSS, Bootstrap, MaterializeCSS, Foundation и т.д...... Но вы будете использовать лишь небольшую часть фреймворка и содержать много неиспользуемых CSS-стилей.
Вот тут и вступает в игру PurgeCSS. PurgeCSS анализирует ваш контент и CSS-файлы. Затем он сопоставляет селекторы, используемые в файле, с теми, что в файле контента. Он удаляет неиспользуемые селекторы из CSS, что приводит к уменьшению CSS-файлов.
Сайт:Вход по гиперссылке виден.
Адрес на GitHub:Вход по гиперссылке виден.
Сначала мы можем глобально установить пакет PurgeCSS с помощью npm со следующей командой:
Создайте новый проект ASP.NET Core MVC с помощью VS, и проект по умолчанию будет использовать стиль Bootstrap 5 и загружаться в браузереbootstrap.min.cssРазмер файла163 КБ, стартовый проект выглядит следующим образом:
Начинайте оптимизировать с помощью PurgeCSS, создавая новый в корне проектаpurgecss.config.jsКонфигурационный файл выглядит следующим образом:
Ссылка на конфигурационный файл PurgeCSS следующая:
interface UserDefinedOptions {
content: Array<string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
экстракторы?: <Extractors>Массивы;
fontFace?: boolean;
ключевые кадры?: булевы;
выход?: строка;
Отвергнуты?: булев;
rejectedCss?: boolean;
STDIN?: булевый;
Stdout?: булевый;
переменные?: булевые;
safelist?: UserDefinedSafelist;
blocklist?: StringRegExpArray;
}
interface RawContent {
расширение: строка
RAW: струна
}
interface RawCSS {
RAW: струна
}
тип StringRegExpArray = Array<RegExp | строка>;
тип ComplexSafelist = {
standard?: StringRegExpArray;
deep?: RegExp[];
жадный?: RegExp[];
переменные?: StringRegExpArray;
ключевых кадров?: StringRegExpArray;
};
тип UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Как показано ниже:
Запустите опубликованный проект и просмотрите его в браузереbootstrap.min.cssОптимальный размер равен20,8 КБ, как показано на рисунке ниже:
Это значит, что размер исходного файла bootstrap.min.css составляет 163 КБ, и мы используем только стиль класса 20,8 КБ, что нам помогает PurgeCSSБыло удалено 142 КБ контента。
(Конец) |
Опубликовано 08.05.2024 19:13:56
|
|
|
|
Хозяин|
Опубликовано 08.05.2024 21:07:25
|
