Cerințe: Într-un proiect, aproape toate framework-urile front-end sunt referențiate, cum ar fi: TailwindCSS, Bootstrap, MaterializeCSS, Foundation etc.; putem folosi doar unele dintre stilurile CSS în acesta, iar la publicare, putem șterge codul CSS neutilizat, astfelAccelerează accesul la site-uri, economisește lățime de bandă și memorie la browserAşteaptă.
PurgeCSS este un instrument pentru eliminarea CSS-ului nefolosit. Poate face parte din fluxul tău de lucru de dezvoltare.
Când construiești un site web, poți decide să folosești un framework CSS precum TailwindCSS, Bootstrap, MaterializeCSS, Foundation etc...... Dar vei folosi doar o mică parte din framework și vei conține multe stiluri CSS nefolosite.
Aici intervine PurgeCSS. PurgeCSS analizează conținutul și fișierele CSS ale tale. Apoi potrivește selectorii folosiți în fișier cu cei din fișierul de conținut. Elimină selectorii neutilizați din CSS, rezultând fișiere CSS mai mici.
Site:Autentificarea cu hyperlink este vizibilă.
Adresă GitHub:Autentificarea cu hyperlink este vizibilă.
În primul rând, putem instala pachetul PurgeCSS global folosind npm cu următoarea comandă:
Creează un nou proiect MVC ASP.NET Core folosind VS, iar proiectul va folosi implicit stilul Bootstrap 5 și se va încărca în browserbootstrap.min.cssDimensiunea fișierului163kb, proiectul de start este următorul:
Începe să optimizezi cu PurgeCSS, creând unul nou în rădăcina proiectuluipurgecss.config.jsFișierul de configurare sună astfel:
Referința fișierului de configurare PurgeCSS este următoarea:
interfaza UserDefinedOptions {
conținut: Array<string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
extractoare?: Array<Extractors>;
fontFace?: boolean;
cadre cheie?: booleene;
ieșire?: string;
respins?: boolean;
respinsCs?: boolean;
stdin?: boolean;
Stdout?: Boolean;
variabile?: booleene;
listă sigură?: UserDefinedSafelist;
listă de blocare?: StringRegExpArray;
}
interface RawContent {
extensie: string
raw: string
}
interface RawCSS {
raw: string
}
tip StringRegExpArray = Array<RegExp | string>;
tip ComplexSafelist = {
standard?: StringRegExpArray;
deep?: RegExp[];
lacom?: RegExp[];
variabile?: StringRegExpArray;
cadre cheie?: StringRegExpArray;
};
tip UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Așa cum se arată mai jos:
Începe proiectul publicat și vizualizează-l în browserul tăubootstrap.min.cssDimensiunea optimizată este20,8 kb, așa cum se arată în figura de mai jos:
Asta înseamnă că dimensiunea bootstrap.min.css fișierului sursă este de 163kb, iar noi folosim doar stilul de clasă de 20,8kb în interior, iar PurgeCSS ne ajută142 kb de conținut au fost eliminați。
(Sfârșit) |
Postat pe 08.05.2024 19:13:56
|
|
|
|
Proprietarul|
Postat pe 08.05.2024 21:07:25
|
