Eisen: In een project worden bijna alle front-end frameworks genoemd, zoals: TailwindCSS, Bootstrap, MaterializeCSS, Foundation, enz., we gebruiken mogelijk maar enkele CSS-stijlen erin, en bij publicatie kunnen we ongebruikte CSS-code verwijderen, waardoorVersnel de toegang tot de website, bespaar bandbreedte en browsergeheugenWachten.
PurgeCSS is een tool om ongebruikte CSS te verwijderen. Het kan onderdeel zijn van je ontwikkelproces.
Wanneer je een website bouwt, kun je besluiten een CSS-framework te gebruiken zoals TailwindCSS, Bootstrap, MaterializeCSS, Foundation, enzovoort...... Maar je gebruikt maar een klein deel van het framework en bevat veel ongebruikte CSS-stijlen.
Hier komt PurgeCSS om de hoek kijken. PurgeCSS analyseert je content en CSS-bestanden. Vervolgens wordt de selectors in het bestand gekoppeld aan die in het contentbestand. Het verwijdert ongebruikte selectors uit CSS, wat resulteert in kleinere CSS-bestanden.
Website:De hyperlink-login is zichtbaar.
GitHub-adres:De hyperlink-login is zichtbaar.
Eerst kunnen we het PurgeCSS-pakket globaal installeren met npm en het volgende commando:
Maak een nieuw ASP.NET Core MVC-project aan met VS, en het project gebruikt standaard de Bootstrap 5-stijl en laadt in de browserbootstrap.min.cssBestandsgrootte163kb, het startproject is als volgt:
Begin met optimaliseren met PurgeCSS, en maak een nieuwe aan in de projectrootpurgecss.config.jsHet configuratiebestand luidt als volgt:
De verwijzing naar het configuratiebestand van PurgeCSS is als volgt:
interface UserDefinedOptions {
inhoud: Array<string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
extractors?: Array<Extractors>;
fontFace?: booleaans;
Keyframes?: Booleaans;
output?: snaar;
Afgewezen?: Booleaans;
afgewezen Css?: booleaan;
STDIN?: Booleaans;
STDOUT?: Booleaans;
variabelen?: Booleaan;
safelist?: UserDefinedSafelist;
bloklijst?: StringRegExpArray;
}
interface RawContent {
Uitbreiding: snaar
RAW: String
}
interface RawCSS {
RAW: String
}
type StringRegExpArray = Array<RegExp | string>;
type ComplexSafelist = {
standaard?: StringRegExpArray;
deep?: RegExp[];
hebzuchtig?: RegExp[];
variabelen?: StringRegExpArray;
keyframes?: StringRegExpArray;
};
type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Zoals hieronder getoond:
Start het gepubliceerde project en bekijk het in je browserbootstrap.min.cssDe geoptimaliseerde grootte is20,8 kb, zoals getoond in de onderstaande figuur:
Dit betekent dat de bootstrap.min.css bronbestand 163kb is, en we gebruiken alleen de 20,8kb classstijl binnenin, en PurgeCSS helpt ons142 kb aan inhoud werd verwijderd。
(Einde) |
Geplaatst op 08-05-2024 19:13:56
|
|
|
|
Huisbaas|
Geplaatst op 08-05-2024 21:07:25
|
