Zahteve: V projektu so skoraj vsi front-end okvirji referencirani, kot so: TailwindCSS, Bootstrap, MaterializeCSS, Foundation itd., lahko uporabimo le nekatere CSS stile, pri objavljanju pa lahko izbrišemo neuporabljeno CSS kodo, takoPospešite dostop do spletnih strani, prihranite pasovno širino in pomnilnik brskalnikaČakaj.
PurgeCSS je orodje za odstranjevanje neuporabljenega CSS. To je lahko del vašega razvojnega dela.
Ko gradite spletno stran, se lahko odločite za uporabo CSS ogrodja, kot so TailwindCSS, Bootstrap, MaterializeCSS, Foundation itd...... Vendar boste uporabljali le majhen del ogrodja in boste vsebovali veliko neuporabljenih CSS slogov.
Tu pride v poštev PurgeCSS. PurgeCSS analizira vašo vsebino in CSS datoteke. Nato primerja izbirnike, uporabljene v datoteki, s tistimi v vsebinski datoteki. Odstrani neuporabljene izbirnike iz CSS, kar povzroči manjše CSS datoteke.
Spletna stran:Prijava do hiperpovezave je vidna.
GitHub naslov:Prijava do hiperpovezave je vidna.
Najprej lahko globalno namestimo paket PurgeCSS z uporabo npm z naslednjim ukazom:
Ustvarite nov ASP.NET Core MVC projekt z uporabo VS, projekt pa bo privzeto uporabljal slog Bootstrap 5 in se nalagal v brskalnikubootstrap.min.cssVelikost datoteke163kb, začetni projekt je naslednji:
Začnite optimizirati s PurgeCSS in ustvarite novega v korenu projektapurgecss.config.jsKonfiguracijska datoteka se glasi takole:
Referenca konfiguracijske datoteke PurgeCSS je naslednja:
vmesnik UserDefinedOptions {
vsebina: Array<string | SurovaVsebina>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
ekstraktorji?: Array<Extractors>;
fontFace?: boolean;
Ključne sličice?: Boolean;
izhod?: struna;
zavrnjeno?: Boolean;
zavrnjenoCss?: boolean;
Stdin?: Boolean;
Stdout?: Boolean;
spremenljivke?: Boolean;
safelist?: UserDefinedSafelist;
blocklist?: StringRegExpArray;
}
vmesnik RawContent {
podaljšek: struna
surovo: struna
}
vmesnik RawCSS {
surovo: struna
}
type StringRegExpArray = Array<RegExp | string>;
type ComplexSafelist = {
standard?: StringRegExpArray;
globoko?: RegExp[];
pohlepni?: RegExp[];
spremenljivke?: StringRegExpArray;
ključne sličice?: StringRegExpArray;
};
type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Kot je prikazano spodaj:
Začni objavljeni projekt in si ga oglej v svojem brskalnikubootstrap.min.cssOptimizirana velikost je20,8 kb, kot je prikazano na spodnji sliki:
To pomeni, da je velikost bootstrap.min.css izvorne datoteke 163kb, uporabljamo le 20,8kb slog razreda v notranjosti, PurgeCSS pa nam pomagaOdstranjenih je bilo 142 kb vsebine。
(Konec) |
Objavljeno na 8. 05. 2024 19:13:56
|
|
|
|
Najemodajalec|
Objavljeno na 8. 05. 2024 21:07:25
|
