Изисквания: В един проект почти всички фронт-енд фреймуърци са реферирани, като: 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Размер на файла163kb, Стартовият проект е следният:
Започнете оптимизиране с PurgeCSS, създавайки нов в корена на проектаpurgecss.config.jsКонфигурационният файл гласи следното:
Препратката към конфигурационния файл PurgeCSS е следната:
interface UserDefinedOptions {
съдържание: Array<string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
екстрактори?: Масив<Extractors>;
fontFace?: boolean;
ключови кадри?: булев;
изход?: струна;
Отхвърлен?: булев;
rejectedCss?: boolean;
STDIN?: булев;
Stdout?: булев;
променливи?: булев;
Safelist?: UserDefinedSafelist;
blocklist?: StringRegExpArray;
}
interface RawContent {
разширение: низ
RAW: String
}
interface RawCSS {
RAW: String
}
тип StringRegExpArray = Array<RegExp | string>;
тип ComplexSafelist = {
standard?: StringRegExpArray;
дълбок?: RegExp[];
алчен?: RegExp[];
променливи?: StringRegExpArray;
ключови кадри?: StringRegExpArray;
};
тип UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Както е показано по-долу:
Стартирайте публикувания проект и го прегледайте в браузъра сиbootstrap.min.cssОптимизираният размер е20.8 kb, както е показано на фигурата по-долу:
Това означава, че размерът на bootstrap.min.css изходния файл е 163kb, а ние използваме само стила клас 20.8kb вътре, а PurgeCSS ни помагаБяха премахнати 142 kb съдържание。
(Край) |
Публикувано в 8.05.2024 г. 19:13:56 ч.
|
|
|
|
Хазяин|
Публикувано в 8.05.2024 г. 21:07:25 ч.
|
