Krav: I et projekt refereres næsten alle front-end frameworks, såsom: TailwindCSS, Bootstrap, MaterializeCSS, Foundation osv., vi bruger måske kun nogle af CSS-stilene i det, og ved publicering kan vi slette ubrugt CSS-kode, såledesGør adgangen til hjemmesiden hurtigere, spar båndbredde og browserhukommelseVent.
PurgeCSS er et værktøj til at fjerne ubrugt CSS. Det kan være en del af din udviklingsarbejdsgang.
Når du bygger en hjemmeside, kan du vælge at bruge et CSS-framework som TailwindCSS, Bootstrap, MaterializeCSS, Foundation osv...... Men du vil kun bruge en lille del af frameworket og indeholde mange ubrugte CSS-stilarter.
Her kommer PurgeCSS ind i billedet. PurgeCSS analyserer dit indhold og CSS-filer. Den matcher derefter de vælgere, der bruges i filen, med dem i indholdsfilen. Den fjerner ubrugte vælgere fra CSS, hvilket resulterer i mindre CSS-filer.
Hjemmeside:Hyperlink-login er synlig.
GitHub-adresse:Hyperlink-login er synlig.
Først kan vi installere PurgeCSS-pakken globalt ved hjælp af npm med følgende kommando:
Opret et nyt ASP.NET Core MVC-projekt ved hjælp af VS, og projektet vil som standard bruge Bootstrap 5-stilen og indlæse i browserenbootstrap.min.cssFilstørrelse163 KB, startprojektet er som følger:
Begynd at optimere med PurgeCSS og opret en ny i projektets rodpurgecss.config.jsKonfigurationsfilen lyder som følger:
PurgeCSS-konfigurationsfilens reference er som følger:
interface UserDefinedOptions {
indhold: Array<string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
ekstraktorer?: Array<Extractors>;
fontFace?: boolesk;
Keyframes?: Boolesk;
output?: snor;
Afvist?: Boolesk;
afvist Css?: boolesk;
STDIN?: Boolesk;
STDOUT?: Boolesk;
variable?: boolesk;
safelist?: UserDefinedSafelist;
blokliste?: StringRegExpArray;
}
interface RawContent {
Udvidelse: streng
RAW: Streng
}
interface RawCSS {
RAW: Streng
}
type StringRegExpArray = Array<RegExp | string>;
type ComplexSafelist = {
standard?: StringRegExpArray;
dyb?: RegExp[];
grådig?: RegExp[];
variabler?: StringRegExpArray;
keyframes?: StringRegExpArray;
};
type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Som vist nedenfor:
Start det publicerede projekt og se det i din browserbootstrap.min.cssDen optimerede størrelse er20,8 kb, som vist i figuren nedenfor:
Det betyder, at bootstrap.min.css kildefilstørrelsen er 163kb, og vi bruger kun 20,8kb klassestilen indeni, og PurgeCSS hjælper os142 kb indhold blev fjernet。
(Slut) |
Opslået på 08/05/2024 19.13.56
|
|
|
|
Udlejer|
Opslået på 08/05/2024 21.07.25
|
