Krav: I ett projekt refereras nästan alla front-end-ramverk, såsom: TailwindCSS, Bootstrap, MaterializeCSS, Foundation, etc., vi kan bara använda vissa av CSS-stilarna i det, och vid publicering kan vi ta bort oanvänd CSS-kod, vilket innebär att vi kan ta bort oanvänd CSS-kod, vilket gör attSnabba upp webbplatsåtkomsten, spara bandbredd och webbläsarminneVänta.
PurgeCSS är ett verktyg för att ta bort oanvänd CSS. Det kan vara en del av ditt utvecklingsarbetsflöde.
När du bygger en webbplats kan du välja att använda ett CSS-ramverk som TailwindCSS, Bootstrap, MaterializeCSS, Foundation, etc...... Men du kommer bara använda en liten del av ramverket och innehålla många oanvända CSS-stilar.
Det är här PurgeCSS kommer in i bilden. PurgeCSS analyserar ditt innehåll och CSS-filer. Den matchar sedan de selektorer som används i filen med de i innehållsfilen. Den tar bort oanvända selektorer från CSS, vilket resulterar i mindre CSS-filer.
Webbplats:Inloggningen med hyperlänken är synlig.
GitHub-adress:Inloggningen med hyperlänken är synlig.
Först kan vi installera PurgeCSS-paketet globalt med npm och följande kommando:
Skapa ett nytt ASP.NET Core MVC-projekt med VS, och projektet kommer att använda Bootstrap 5-stilen som standard och ladda i webbläsarenbootstrap.min.cssFilstorlek163 KB, startprojektet är följande:
Börja optimera med PurgeCSS och skapa en ny i projektrotenpurgecss.config.jsKonfigurationsfilen lyder som följer:
Referensen till PurgeCSS-konfigurationsfilen är följande:
gränssnittet UserDefinedOptions {
innehåll: Array<string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
extraktorer?: Array<Extractors>;
fontFace?: boolesk;
Keyframes?: booleskt;
utgång?: sträng;
Avvisad?: boolesk;
avvisade Css?: booleskt;
STDIN?: Boolesk;
STDOUT?: Boolesk;
variabler?: booleskt;
safelist?: UserDefinedSafelist;
blocklista?: StringRegExpArray;
}
gränssnittet RawContent {
Förlängning: sträng
RAW: Sträng
}
gränssnittet RawCSS {
RAW: Sträng
}
typ StringRegExpArray = Array<RegExp | string>;
typ ComplexSafelist = {
standard?: StringRegExpArray;
djup?: RegExp[];
Girig?: RegExp[];
variabler?: StringRegExpArray;
nyckelramar?: StringRegExpArray;
};
type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Som visas nedan:
Starta det publicerade projektet och visa det i din webbläsarebootstrap.min.cssDen optimerade storleken är20,8 kb, som visas i figuren nedan:
Detta innebär att bootstrap.min.css källfilstorlek är 163 kb, och vi använder endast 20,8 kb klassstilen inuti, och PurgeCSS hjälper oss142 kb innehåll togs bort。
(Slut) |
Publicerad på 2024-05-08 19:13:56
|
|
|
|
Hyresvärd|
Publicerad på 2024-05-08 21:07:25
|
