Krav: I et prosjekt refereres nesten alle front-end rammeverk, som: TailwindCSS, Bootstrap, MaterializeCSS, Foundation, osv., vi kan bare bruke noen av CSS-stilene i det, og ved publisering kan vi slette ubrukt CSS-kode, og dermedRaskere tilgang til nettsiden, spar båndbredde og nettleserminneVent.
PurgeCSS er et verktøy for å fjerne ubrukt CSS. Det kan være en del av utviklingsarbeidsflyten din.
Når du bygger et nettsted, kan du velge å bruke et CSS-rammeverk som TailwindCSS, Bootstrap, MaterializeCSS, Foundation, osv...... Men du vil bare bruke en liten del av rammeverket og vil inneholde mange ubrukte CSS-stiler.
Det er her PurgeCSS kommer inn i bildet. PurgeCSS analyserer innholdet ditt og CSS-filene. Den matcher deretter velgerne som brukes i filen med de i innholdsfilen. Den fjerner ubrukte velgere fra CSS, noe som resulterer i mindre CSS-filer.
Nettside:Innloggingen med hyperkoblingen er synlig.
GitHub-adresse:Innloggingen med hyperkoblingen er synlig.
Først kan vi installere PurgeCSS-pakken globalt ved hjelp av npm med følgende kommando:
Opprett et nytt ASP.NET Core MVC-prosjekt med VS, og prosjektet vil bruke Bootstrap 5-stilen som standard og laste inn i nettleserenbootstrap.min.cssFilstørrelse163 kb, startprosjektet er som følger:
Begynn å optimalisere med PurgeCSS, og lag en ny i prosjektrotenpurgecss.config.jsKonfigurasjonsfilen lyder som følger:
Referansen til PurgeCSS-konfigurasjonsfilen er som følger:
grensesnitt UserDefinedOptions {
innhold: Array<string | RawContent>;
css: Array<streng | RawCSS>;
defaultExtractor?: ExtractorFunction;
ekstraktorer?: Array<Extractors>;
fontFace?: boolsk;
Keyframes?: boolsk;
utgang?: streng;
Avvist?: boolsk;
avvist Css?: boolsk;
STDIN?: boolsk;
STDOUT?: Boolesk;
variabler?: boolsk;
safelist?: UserDefinedSafelist;
blokkliste?: StringRegExpArray;
}
grensesnitt RawContent {
utvidelse: streng
RAW: String
}
grensesnittet RawCSS {
RAW: String
}
type StringRegExpArray = Array<RegExp | string>;
type ComplexSafelist = {
standard?: StringRegExpArray;
dyp?: RegExp[];
grådig?: RegExp[];
variabler?: StringRegExpArray;
nøkkelrammer?: StringRegExpArray;
};
type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Som vist nedenfor:
Start det publiserte prosjektet og se det i nettleseren dinbootstrap.min.cssDen optimaliserte størrelsen er20,8 kb, som vist i figuren nedenfor:
Dette betyr at bootstrap.min.css kildefilstørrelsen er 163 kb, og vi bruker kun 20,8 kb klassestilen inne, og PurgeCSS hjelper oss142 kb innhold ble fjernet。
(Slutt) |
Publisert på 08.05.2024 19:13:56
|
|
|
|
Vert|
Publisert på 08.05.2024 21:07:25
|
