Nõuded: Projektis viidatakse peaaegu kõigile front-end raamistikele, näiteks: TailwindCSS, Bootstrap, MaterializeCSS, Foundation jne, võime kasutada ainult mõnda CSS-stiili ning avaldamisel saame kustutada kasutamata CSS-koodi, seegaKiirenda veebilehe ligipääsu, säästa ribalaiust ja brauseri mäluOota.
PurgeCSS on tööriist kasutamata CSS-i eemaldamiseks. See võib olla osa sinu arendustöövoost.
Kui ehitad veebilehte, võid otsustada kasutada CSS raamistikku nagu TailwindCSS, Bootstrap, MaterializeCSS, Foundation jne...... Aga sa kasutad vaid väikest osa raamistikust ja sisaldab palju kasutamata CSS stiile.
Siin tuleb mängu PurgeCSS. PurgeCSS analüüsib sinu sisu ja CSS-faile. Seejärel sobitab see failis kasutatavad valijad sisufaili omadega. See eemaldab CSS-ist kasutamata valikuseadmed, mille tulemusel on väiksemad CSS-failid.
Veebileht:Hüperlingi sisselogimine on nähtav.
GitHubi aadress:Hüperlingi sisselogimine on nähtav.
Esiteks saame PurgeCSS paketi globaalselt paigaldada npm-i abil järgmise käsuga:
Loo uus ASP.NET Core MVC projekt VS-iga ja projekt kasutab vaikimisi Bootstrap 5 stiili ning laadib brauserisbootstrap.min.cssFaili suurus163kb, Start projekt on järgmine:
Alusta optimeerimist PurgeCSS-iga, luues projekti juures uuepurgecss.config.jsKonfiguratsioonifail kõlab järgmiselt:
PurgeCSS konfiguratsioonifaili viide on järgmine:
liides UserDefinedOptions {
sisu: Array<string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
ekstraktorid?: <Extractors>Antennis;
fontFace?: boolean;
võtmeraamid?: Boolean;
väljund?: string;
Tagasi lükatud?: boolean;
rejectedCss?: boolean;
STDIN?: Boolean;
stdout?: boolean;
muutujad?: boolean;
safelist?: UserDefinedSafelist;
blocklist?: StringRegExpArray;
}
liides RawContent {
Laiendus: string
toores: keel
}
interface RawCSS {
toores: keel
}
type StringRegExpArray = Array<RegExp | string>;
type ComplexSafelist = {
standard?: StringRegExpArray;
sügav?: RegExp[];
ahne?: RegExp[];
muutujad?: StringRegExpArray;
võtmeraamid?: StringRegExpArray;
};
type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Nagu allpool näidatud:
Alusta avaldatud projekti ja vaata seda oma brauserisbootstrap.min.cssOptimeeritud suurus on20,8 kb, nagu alloleval joonisel näidatud:
See tähendab, et bootstrap.min.css lähtefaili suurus on 163kb, ja me kasutame ainult 20,8kb klassi stiili sees, ning PurgeCSS aitab meid142 kb sisu eemaldati。
(Lõpp) |
Postitatud 08.05.2024 19:13:56
|
|
|
|
Üürileandja|
Postitatud 08.05.2024 21:07:25
|
