Követelmények: Egy projektben szinte minden front-end keretrendszerre hivatkoznak, mint például: TailwindCSS, Bootstrap, MaterializeCSS, Foundation stb., csak néhány CSS stílust használhatunk benne, és publikáláskor törölhetjük a használatlan CSS kódot, így törölhetjük a használatlan CSS kódotGyorsítsd a weboldal elérését, spórolj a sávszélességet és a böngészőmemóriátVárj.
A PurgeCSS egy eszköz a használatlan CSS eltávolítására. Ez része lehet a fejlesztési munkafolyamatnak.
Amikor weboldalt építesz, lehet, hogy CSS keretrendszert használsz, mint például a TailwindCSS, Bootstrap, MaterializeCSS, Foundation stb....... De csak a keretrendszer egy kis részét fogod használni, és sok kihasználatlan CSS stílust fogsz tartalmazni.
Itt jön képbe a PurgeCSS. A PurgeCSS elemzi a tartalmadat és a CSS fájlokat. Ezután a fájlban használt választókat a tartalomfájlban használt választókat illeszteti. Eltávolítja a CSS-ből a használatlan választókat, így kisebb CSS fájlok jelennek meg.
Weboldal:A hiperlink bejelentkezés látható.
GitHub cím:A hiperlink bejelentkezés látható.
Először is, a PurgeCSS csomagot globálisan telepíthetjük npm segítségével a következő parancs segítségével:
Létrehozz egy új ASP.NET Core MVC projektet VS-szel, és a projekt alapértelmezés szerint a Bootstrap 5 stílust használja, majd betöltődik a böngészőbenbootstrap.min.cssFájlméret163kb, a Start projekt a következő:
Kezdj el optimalizálni a PurgeCSS-szel, hozz létre egy újat a projekt gyökereibenpurgecss.config.jsA konfigurációs fájl a következőképpen szól:
A PurgeCSS konfigurációs fájl hivatkozása a következő:
interfész UserDefinedOptions {
content: Array<string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
Extractors?: Array<Extractors>;
fontFace?: boolean;
kulcskeretek?: Boolean;
kimenet?: string;
elutasított?: boolean;
rejectedCss?: boolean;
STDIN?: Boolean;
Stdout?: Boolean;
változók?: Boolean;
safelist?: UserDefinedSafelist;
blocklist?: StringRegExpArray;
}
interface RawContent {
Kiterjesztés: string
nyers: húr
}
interface RawCSS {
nyers: húr
}
type StringRegExpArray = Array<RegExp | string>;
type ComplexSafelist = {
standard?: StringRegExpArray;
mély?: RegExp[];
kapzsi?: RegExp[];
változók?: StringRegExpArray;
kulcskeretek?: StringRegExpArray;
};
type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Ahogy az alábbiakban látható:
Indítsd el a közzétett projektet, és nézd meg a böngésződbenbootstrap.min.cssAz optimalizált méret a következő20,8 kb, ahogy az alábbi ábrán látható:
Ez azt jelenti, hogy a bootstrap.min.css forrásfájl mérete 163kb, és csak a 20,8kb-es osztálystílust használjuk benn, és a PurgeCSS segít nekünk142 kb tartalmat töröltek。
(Vége) |
Közzétéve 2024. 05. 08. 19:13:56
|
|
|
|
Háziúr|
Közzétéve 2024. 05. 08. 21:07:25
|
