Prasības: Projektā ir atsauces uz gandrīz visiem front-end ietvariem, piemēram: TailwindCSS, Bootstrap, MaterializeCSS, Foundation utt., Mēs tajā varam izmantot tikai dažus CSS stilus, un, publicējot, mēs varam izdzēst neizmantoto CSS kodu, tādējādiPaātriniet piekļuvi tīmekļa vietnei, ietaupiet joslas platumu un pārlūkprogrammas atmiņuPagaidiet.
PurgeCSS ir rīks neizmantotā CSS noņemšanai. Tas var būt daļa no jūsu izstrādes darbplūsmas.
Veidojot vietni, varat izlemt izmantot CSS ietvaru, piemēram, TailwindCSS, Bootstrap, MaterializeCSS, Foundation utt...... Bet jūs izmantosiet tikai nelielu sistēmas daļu, un tajā būs daudz neizmantotu CSS stilu.
Šeit spēlē PurgeCSS. PurgeCSS analizē jūsu saturu un CSS failus. Pēc tam failā izmantotie atlasītāji tiek saskaņoti ar satura failā esošajiem atlasītājiem. Tas noņem neizmantotos selektorus no CSS, kā rezultātā tiek iegūti mazāki CSS faili.
Tīmekļa vietne:Hipersaites pieteikšanās ir redzama.
GitHub adrese:Hipersaites pieteikšanās ir redzama.
Pirmkārt, mēs varam instalēt PurgeCSS pakotni globāli, izmantojot npm ar šādu komandu:
Izveidojiet jaunu ASP.NET Core MVC projektu, izmantojot VS, un projekts pēc noklusējuma izmantos Bootstrap 5 stilu un ielādēs pārlūkprogrammābootstrap.min.cssFaila lielums163 kb, sākuma projekts ir šāds:
Sāciet optimizāciju ar PurgeCSS, izveidojot jaunu projekta saknēpurgecss.config.jsKonfigurācijas fails skan šādi:
PurgeCSS konfigurācijas faila atsauce ir šāda:
interfeiss UserDefinedOptions {
saturs: Masīvs<virkne | RawContent>;
css: masīvs<virkne | RawCSS>;
defaultExtractor?: ExtractorFunction;
nosūcēji?: Masīvs<Extractors>;
fontFace?: Būls;
Atslēgas kadri?: Būls;
izeja?: virkne;
noraidīts?: Būls;
noraidītsCss?: būls;
stdin?: Būls;
stdout?: Būls;
mainīgie?: Būls;
drošais saraksts?: UserDefinedSafelist;
bloķēšanas saraksts?: StringRegExpArray;
}
interfeiss RawContent {
pagarinājums: virkne
neapstrādāts: stīga
}
interfeiss RawCSS {
neapstrādāts: stīga
}
tips StringRegExpArray = Array<RegExp | virkne>;
ierakstiet ComplexSafelist = {
standarta?: StringRegExpArray;
dziļi?: RegExp[];
mantkārīgs?: RegExp[];
mainīgie?: StringRegExpArray;
atslēgas kadri?: StringRegExpArray;
};
tips UserDefinedSafelist = StringRegExpArray | KomplekssDrošs saraksts;
Kā parādīts zemāk:
Sāciet publicēto projektu un skatiet to savā pārlūkprogrammābootstrap.min.cssOptimizētais izmērs ir20.8 kb, kā parādīts attēlā:
Tas nozīmē, ka bootstrap.min.css avota faila lielums ir 163 kb, un mēs izmantojam tikai 20.8 kb klases stilu, un PurgeCSS mums palīdz142 KB satura tika noņemts。
(Beigas) |
Publicēts 08.05.2024 19:13:56
|
|
|
|
Saimnieks|
Publicēts 08.05.2024 21:07:25
|
