Requisiti: In un progetto, quasi tutti i framework front-end sono riferiti, come: TailwindCSS, Bootstrap, MaterializeCSS, Foundation, ecc.; potremmo usare solo alcuni stili CSS e, durante la pubblicazione, possiamo eliminare il codice CSS inutilizzato, quindiVelocizza l'accesso al sito web, risparmia larghezza di banda e memoria del browserAspettare.
PurgeCSS è uno strumento per rimuovere CSS inutilizzato. Può far parte del tuo flusso di lavoro di sviluppo.
Quando costruisci un sito web, potresti decidere di usare un framework CSS come TailwindCSS, Bootstrap, MaterializeCSS, Foundation, ecc...... Ma userai solo una piccola parte del framework e conterrai molti stili CSS inutilizzati.
Ed è qui che entra in gioco PurgeCSS. PurgeCSS analizza i tuoi contenuti e i file CSS. Successivamente abbina i selettori usati nel file con quelli del file di contenuto. Rimuove i selettori inutilizzati dal CSS, risultando in file CSS più piccoli.
Sito web:Il login del link ipertestuale è visibile.
Indirizzo GitHub:Il login del link ipertestuale è visibile.
Per prima cosa, possiamo installare il pacchetto PurgeCSS globalmente usando npm con il seguente comando:
Crea un nuovo progetto MVC ASP.NET Core usando VS, e il progetto utilizzerà di default lo stile Bootstrap 5 e si caricherà nel browserbootstrap.min.cssDimensione del file163kb, il progetto di inizio è il seguente:
Inizia a ottimizzare con PurgeCSS, creando uno nuovo nella root del progettopurgecss.config.jsIl file di configurazione recita come segue:
Il riferimento al file di configurazione PurgeCSS è il seguente:
interface UserDefinedOptions {
contenuto: Array <string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
estrattori?: Matrico<Extractors>;
fontFace?: booleano;
fotogrammi chiave?: booleano;
output?: string;
rifiutato?: booleano;
rifiutatiCss?: booleano;
STDIN?: Booleano;
Periodo di ristorazione?: Booleano;
variabili?: booleana;
lista sicura?: UserDefinedSafelist;
lista blocchi?: StringRegExpArray;
}
interface RawContent {
estensione: stringa
raw: stringa
}
interface RawCSS {
raw: stringa
}
tipo StringRegExpArray = Array<RegExp | stringa>;
tipo ComplexSafelist = {
standard?: StringRegExpArray;
profondo?: RegExp[];
avido?: RegExp[];
variabili?: StringRegExpArray;
fotogrammi chiave?: StringRegExpArray;
};
type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Come mostrato di seguito:
Avvia il progetto pubblicato e visualizzalo nel tuo browserbootstrap.min.cssLa dimensione ottimizzata è20,8 kb, come mostrato nella figura sottostante:
Questo significa che la dimensione bootstrap.min.css file sorgente è 163kb, e usiamo solo lo stile classe da 20,8kb all'interno, e PurgeCSS ci aiutaSono stati rimossi 142 kb di contenuto。
(Fine) |
Pubblicato su 08/05/2024 19:13:56
|
|
|
|
Padrone di casa|
Pubblicato su 08/05/2024 21:07:25
|
