Požiadavky: V projekte sa odkazuje takmer na všetky front-end frameworky, ako napríklad: TailwindCSS, Bootstrap, MaterializeCSS, Foundation a podobne, môžeme použiť len niektoré CSS štýly, a pri publikovaní môžeme vymazať nepoužitý CSS kód, tedaZrýchliť prístup na webové stránky, ušetriť šírku pásma a pamäť prehliadačaČakať.
PurgeCSS je nástroj na odstránenie nevyužitého CSS. Môže byť súčasťou vášho vývojárskeho pracovného postupu.
Keď vytvárate webovú stránku, môžete sa rozhodnúť použiť CSS framework ako TailwindCSS, Bootstrap, MaterializeCSS, Foundation a podobne...... Ale použijete len malú časť frameworku a budete obsahovať veľa nevyužitých CSS štýlov.
Tu prichádza na rad PurgeCSS. PurgeCSS analyzuje váš obsah a CSS súbory. Potom porovná výbery použité v súbore s tými v obsahovom súbore. Odstraňuje nepoužívané selektory z CSS, čo vedie k menším CSS súborom.
Webstránka:Prihlásenie na hypertextový odkaz je viditeľné.
GitHub adresa:Prihlásenie na hypertextový odkaz je viditeľné.
Najprv môžeme globálne nainštalovať balík PurgeCSS pomocou npm pomocou nasledujúceho príkazu:
Vytvorte nový ASP.NET Core MVC projekt pomocou VS a projekt bude štandardne používať štýl Bootstrap 5 a načíta sa v prehliadačibootstrap.min.cssVeľkosť súboru163kb, štartovací projekt je nasledovný:
Začni optimalizovať pomocou PurgeCSS, vytváraj nový v koreňovom systéme projektupurgecss.config.jsKonfiguračný súbor znie nasledovne:
Referencia konfiguračného súboru PurgeCSS je nasledovná:
interface UserDefinedOptions {
obsah: Array<string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
extraktory?: Array<Extractors>;
fontFace?: boolean;
kľúčové snímky?: Boolean;
výstup?: struna;
Zamietnuté?: Boolean;
odmietnutéCss?: boolean;
Stdin?: Boolean;
Stdout?: Boolean;
Premenné?: Boolean;
safelist?: UserDefinedSafelist;
zoznam blokov?: StringRegExpArray;
}
rozhranie RawContent {
Rozšírenie: String
RAW: Struna
}
interface RawCSS {
RAW: Struna
}
type StringRegExpArray = Array<RegExp | string>;
type ComplexSafelist = {
štandardne?: StringRegExpArray;
hlboké?: RegExp[];
chamtivý?: RegExp[];
premenné?: StringRegExpArray;
kľúčové snímky?: StringRegExpArray;
};
type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Ako je uvedené nižšie:
Spusti publikovaný projekt a pozri si ho vo svojom prehliadačibootstrap.min.cssOptimalizovaná veľkosť je20,8 kb, ako je znázornené na obrázku nižšie:
To znamená, že veľkosť bootstrap.min.css zdrojového súboru je 163kb a používame len 20,8kb štýl triedy vo vnútri, pričom PurgeCSS nám pomáhaBolo odstránených 142 kb obsahu。
(Koniec) |
Zverejnené 8. 5. 2024 19:13:56
|
|
|
|
Prenajímateľ|
Zverejnené 8. 5. 2024 21:07:25
|
