Reikalavimai: Projekte nurodomos beveik visos front-end sistemos, tokios kaip: TailwindCSS, Bootstrap, MaterializeCSS, Foundation ir kt., Jame galime naudoti tik kai kuriuos CSS stilius, o publikuodami galime ištrinti nenaudojamą CSS kodą, taigiPagreitinkite prieigą prie svetainės, taupykite pralaidumą ir naršyklės atmintįPalaukti, palauk.
PurgeCSS yra įrankis, skirtas pašalinti nenaudojamą CSS. Tai gali būti jūsų kūrimo darbo eigos dalis.
Kurdami svetainę galite nuspręsti naudoti CSS sistemą, pvz., TailwindCSS, Bootstrap, MaterializeCSS, Foundation ir kt...... Tačiau naudosite tik nedidelę sistemos dalį ir joje bus daug nenaudojamų CSS stilių.
Čia atsiranda PurgeCSS. PurgeCSS analizuoja jūsų turinį ir CSS failus. Tada jis suderina faile naudojamus parinkiklius su turinio failo selektoriais. Jis pašalina nenaudojamus parinkiklius iš CSS, todėl CSS failai yra mažesni.
Interneto svetainė:Hipersaito prisijungimas matomas.
"GitHub" adresas:Hipersaito prisijungimas matomas.
Pirmiausia galime įdiegti "PurgeCSS" paketą visame pasaulyje naudodami npm naudodami šią komandą:
Sukurkite naują ASP.NET Core MVC projektą naudodami VS, o projektas pagal numatytuosius nustatymus naudos "Bootstrap 5" stilių ir įkels į naršyklębootstrap.min.cssFailo dydis163kb, projekto pradžia yra tokia:
Pradėkite optimizuoti naudodami PurgeCSS, sukurdami naują projekto šaknyjepurgecss.config.jsKonfigūracijos failas skamba taip:
PurgeCSS konfigūracijos failo nuoroda yra tokia:
sąsaja UserDefinedOptions {
turinys: Masyvas<eilutė | RawContent>;
css: masyvas<eilutė | RawCSS>;
defaultExtractor?: ExtractorFunction;
ištraukėjai?: Masyvas<Extractors>;
fontFace?: Bulio logika;
Pagrindiniai kadrai?: Bulio logika;
išvestis?: eilutė;
atmestas?: Būlis;
atmestasCss?: Bulio logika;
stdin?: Būlis;
Stdout?: Būlis;
kintamieji?: Bulio logika;
safelist?: UserDefinedSafelist;
blokų sąrašas?: StringRegExpArray;
}
sąsaja RawContent {
prailginimas: virvelė
žalias: styga
}
sąsaja RawCSS {
žalias: styga
}
tipas StringRegExpArray = Array<RegExp | eilutė>;
tipas ComplexSafelist = {
standartinis?: StringRegExpArray;
gilus?: RegExp[];
gobšus?: RegExp[];
kintamieji?: StringRegExpArray;
raktiniai kadrai?: StringRegExpArray;
};
tipas UserDefinedSafelist = StringRegExpArray | KompleksasSaugus sąrašas;
Kaip parodyta žemiau:
Paleiskite publikuotą projektą ir peržiūrėkite jį naršyklėjebootstrap.min.cssOptimizuotas dydis yra20,8 kb, kaip parodyta toliau pateiktame paveikslėlyje:
Tai reiškia, kad bootstrap.min.css šaltinio failo dydis yra 163 kb, o viduje naudojame tik 20,8 kb klasės stilių, o PurgeCSS mums padedaPašalinta 142 KB turinio。
(Pabaiga) |
Paskelbta 2024-05-08 19:13:56
|
|
|
|
Savininkas|
Paskelbta 2024-05-08 21:07:25
|
