Vaatimukset: Projektissa lähes kaikki front-end-kehykset viitataan, kuten: TailwindCSS, Bootstrap, MaterializeCSS, Foundation jne., voimme käyttää vain joitakin CSS-tyylejä, ja julkaisun yhteydessä voimme poistaa käyttämättömän CSS-koodin, näin ollenNopeuta verkkosivuston pääsyä, säästä kaistanleveyttä ja selaimen muistiaOdota.
PurgeCSS on työkalu käyttämättömän CSS:n poistamiseen. Se voi olla osa kehitystyönkulkuasi.
Kun rakennat verkkosivustoa, saatat päättää käyttää CSS-kehystä, kuten TailwindCSS, Bootstrap, MaterializeCSS, Foundation jne...... Mutta käytät vain pientä osaa kehyksestä ja sisältää paljon käyttämättömiä CSS-tyylejä.
Tässä kohtaa PurgeCSS astuu kuvaan. PurgeCSS analysoi sisältösi ja CSS-tiedostosi. Sitten se yhdistää tiedostossa käytetyt valitsimet sisältötiedoston valitsimiin. Se poistaa käyttämättömät valitsimet CSS:stä, mikä johtaa pienempiin CSS-tiedostoihin.
Verkkosivusto:Hyperlinkin kirjautuminen on näkyvissä.
GitHub-osoite:Hyperlinkin kirjautuminen on näkyvissä.
Ensiksi voimme asentaa PurgeCSS-paketin globaalisti npm:llä seuraavalla komennolla:
Luo uusi ASP.NET Core MVC -projekti VS:llä, ja projekti käyttää oletuksena Bootstrap 5 -tyyliä ja ladataan selaimessabootstrap.min.cssTiedostokoko163kb, aloitusprojekti on seuraava:
Aloita optimointi PurgeCSS:llä, luo uusi projekti juurellepurgecss.config.jsKonfiguraatiotiedosto kuuluu seuraavasti:
PurgeCSS-konfiguraatiotiedoston viite on seuraava:
käyttöliittymä UserDefinedOptions {
sisältö: Array<string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
Ekstraktorit?: Array<Extractors>;
fontFace?: boolean;
avainkehykset?: Boolean;
Tulos?: String;
hylätty?: boolean;
rejectedCss?: boolean;
STDIN?: Boolean;
Stdout?: Boolean;
muuttujat?: Boolean;
safelist?: UserDefinedSafelist;
blocklist?: StringRegExpArray;
}
interface RawContent {
laajennus: merkkijono
raaka: kieli
}
interface RawCSS {
raaka: kieli
}
type StringRegExpArray = Array<RegExp | string>;
type ComplexSafelist = {
standardi?: StringRegExpArray;
syvä?: RegExp[];
ahne?: RegExp[];
muuttujat?: StringRegExpArray;
avainkehykset?: StringRegExpArray;
};
type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Kuten alla on esitetty:
Aloita julkaistu projekti ja katso se selaimessasibootstrap.min.cssOptimoitu koko on20,8 kb, kuten alla olevassa kuvassa näkyy:
Tämä tarkoittaa, että bootstrap.min.css lähdetiedoston koko on 163 kb, ja käytämme sisällä vain 20,8 kb luokkatyyliä, ja PurgeCSS auttaa meitä142 kb sisältöä poistettiin。
(Loppu) |
Julkaistu 8.5.2024 19.13.56
|
|
|
|
Vuokraisäntä|
Julkaistu 8.5.2024 21.07.25
|
