Požadavky: V projektu jsou téměř všechny front-end frameworky odkazovány, jako jsou: TailwindCSS, Bootstrap, MaterializeCSS, Foundation atd., můžeme použít pouze některé CSS styly a při publikování můžeme smazat nepoužitý CSS kód, tedyZrychlení přístupu na web, úspora šířky pásma a paměti prohlížečePočkej.
PurgeCSS je nástroj pro odstranění nevyužitého CSS. Může to být součást vašeho vývojového workflow.
Když vytváříte web, můžete se rozhodnout použít CSS framework jako TailwindCSS, Bootstrap, MaterializeCSS, Foundation atd...... Ale použijete jen malou část frameworku a budete obsahovat spoustu nevyužitých CSS stylů.
Právě zde přichází na řadu PurgeCSS. PurgeCSS analyzuje váš obsah a CSS soubory. Poté porovnává selektory použité v souboru s těmi v obsahu. Odstraňuje nepoužité selektory z CSS, což vede k menším CSS souborům.
Internetová stránka:Přihlášení k hypertextovému odkazu je viditelné.
Adresa GitHubu:Přihlášení k hypertextovému odkazu je viditelné.
Nejprve můžeme globálně nainstalovat balíček PurgeCSS pomocí npm pomocí následujícího příkazu:
Vytvořte nový ASP.NET Core MVC projekt pomocí VS a projekt bude ve výchozím nastavení používat styl Bootstrap 5 a načítá se v prohlížečibootstrap.min.cssVelikost souboru163kb, startovací projekt je následující:
Začněte optimalizovat pomocí PurgeCSS a vytvořte nový v kořeni projektupurgecss.config.jsKonfigurační soubor zní následovně:
Odkaz na konfigurační soubor PurgeCSS je následující:
interface UserDefinedOptions {
obsah: Array<string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
extraktory?: Array<Extractors>;
fontFace?: boolean;
Klíčové snímky?: Boolean;
výstup?: struna;
odmítnuto?: Boolean;
odmítnutCss?: boolean;
Stdin?: Boolean;
Stdout?: Boolean;
proměnné?: Booleovské hodnoty;
safelist?: UserDefinedSafelist;
seznam bloků?: StringRegExpArray;
}
rozhraní RawContent {
Extension: String
RAW: String
}
rozhraní RawCSS {
RAW: String
}
typ StringRegExpArray = Array<RegExp | string>;
type ComplexSafelist = {
standard?: StringRegExpArray;
hluboké?: RegExp[];
chamtivý?: RegExp[];
proměnné?: StringRegExpArray;
klíčové snímky?: StringRegExpArray;
};
type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Jak je uvedeno níže:
Spusť publikovaný projekt a zobrazte si ho ve svém prohlížečibootstrap.min.cssOptimalizovaná velikost je20,8 kb, jak je znázorněno na obrázku níže:
To znamená, že velikost bootstrap.min.css zdrojového souboru je 163kb a uvnitř používáme pouze 20,8kb class style, přičemž PurgeCSS nám pomáháBylo odstraněno 142 kb obsahu。
(Konec) |
Zveřejněno 08.05.2024 19:13:56
|
|
|
|
Pronajímatel|
Zveřejněno 08.05.2024 21:07:25
|
