Anforderungen: In einem Projekt werden fast alle Frontend-Frameworks referenziert, wie zum Beispiel: TailwindCSS, Bootstrap, MaterializeCSS, Foundation usw.; wir verwenden möglicherweise nur einige der CSS-Stile darin, und beim Veröffentlichen können wir ungenutzten CSS-Code löschen, sodassBeschleunigen Sie den Website-Zugriff, sparen Sie Bandbreite und BrowserspeicherWarte.
PurgeCSS ist ein Werkzeug zum Entfernen ungenutzter CSS. Es kann Teil deines Entwicklungsablaufs sein.
Wenn du eine Website aufbaust, kannst du dich entscheiden, ein CSS-Framework wie TailwindCSS, Bootstrap, MaterializeCSS, Foundation usw. zu verwenden...... Aber du wirst nur einen kleinen Teil des Frameworks verwenden und viele ungenutzte CSS-Stile enthalten.
Hier kommt PurgeCSS ins Spiel. PurgeCSS analysiert deine Inhalte und CSS-Dateien. Anschließend werden die in der Datei verwendeten Selektoren mit denen in der Inhaltsdatei abgeglichen. Es entfernt ungenutzte Selektoren aus CSS, was zu kleineren CSS-Dateien führt.
Website:Der Hyperlink-Login ist sichtbar.
GitHub-Adresse:Der Hyperlink-Login ist sichtbar.
Zuerst können wir das PurgeCSS-Paket global mit npm installieren, mit folgendem Befehl:
Erstellen Sie ein neues ASP.NET Core MVC-Projekt mit VS, und das Projekt verwendet standardmäßig den Bootstrap-5-Stil und lädt im Browserbootstrap.min.cssDateigröße163 kb, das Start-Projekt ist wie folgt:
Beginnen Sie mit der Optimierung mit PurgeCSS und erstellen Sie eine neue Karte in der Projektwurzelpurgecss.config.jsDie Konfigurationsdatei lautet wie folgt:
Die Referenz auf die PurgeCSS-Konfigurationsdatei lautet wie folgt:
Schnittstelle UserDefinedOptions {
Inhalt: Array<string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
Extraktoren?: Array<Extractors>;
fontFace?: boolean;
Keyframes?: Boolesch;
Ausgabe?: Schnur;
abgelehnt?: Boolean;
abgelehntCss?: boolean;
STDIN?: Boolesch;
STDOUT?: Boolesch;
Variablen?: Boolesch;
safelist?: UserDefinedSafelist;
Blockliste?: StringRegExpArray;
}
Schnittstelle RawContent {
Erweiterung: Saite
RAW: String
}
Schnittstelle RawCSS {
RAW: String
}
type StringRegExpArray = Array<RegExp | string>;
type ComplexSafelist = {
Standard?: StringRegExpArray;
deep?: RegExp[];
gierig?: RegExp[];
Variablen?: StringRegExpArray;
Keyframes?: StringRegExpArray;
};
type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Wie unten gezeigt:
Starte das veröffentlichte Projekt und schau es dir in deinem Browser anbootstrap.min.cssDie optimierte Größe ist20,8 kb, wie in der untenstehenden Abbildung dargestellt:
Das bedeutet, dass die bootstrap.min.css Quelldateigröße 163 kb beträgt, und wir verwenden nur den 20,8kb-Klassenstil im Inneren, und PurgeCSS hilft uns142 kb Inhalt wurden entfernt。
(Ende) |
Veröffentlicht am 08.05.2024 19:13:56
|
|
|
|
Vermieter|
Veröffentlicht am 08.05.2024 21:07:25
|
