Wymagania: W projekcie niemal wszystkie frameworki front-end są wykorzystywane, takie jak: TailwindCSS, Bootstrap, MaterializeCSS, Foundation itd., możemy używać tylko niektórych stylów CSS, a podczas publikowania możemy usunąć nieużywany kod CSS, coPrzyspiesz dostęp do strony internetowej, oszczędz przepustowość i pamięć przeglądarkiCzekać.
PurgeCSS to narzędzie do usuwania nieużywanego CSS. Może to być część Twojego procesu tworzenia oprogramowania.
Budując stronę internetową, możesz zdecydować się na użycie frameworka CSS, takiego jak TailwindCSS, Bootstrap, MaterializeCSS, Foundation itd...... Ale będziesz używać tylko niewielkiej części frameworka i zawierać wiele nieużywanych stylów CSS.
I tu właśnie wkracza PurgeCSS. PurgeCSS analizuje twoje treści i pliki CSS. Następnie dopasowuje selektory użyte w pliku z tymi w pliku treści. Usuwa nieużywane selektory z CSS, co skutkuje mniejszymi plikami CSS.
Strona internetowa:Logowanie do linku jest widoczne.
Adres GitHub:Logowanie do linku jest widoczne.
Po pierwsze, możemy globalnie zainstalować pakiet PurgeCSS za pomocą npm za pomocą następującego polecenia:
Utworzenie nowego projektu ASP.NET Core MVC za pomocą VS, a projekt domyślnie będzie używał stylu Bootstrap 5 i załadował się w przeglądarcebootstrap.min.cssRozmiar pliku163kb, projekt startowy wygląda następująco:
Zacznij optymalizować za pomocą PurgeCSS, tworząc nowy w głównym punkcie projektupurgecss.config.jsPlik konfiguracyjny brzmi następująco:
Referencja pliku konfiguracyjnego PurgeCSS wygląda następująco:
interfejs UserDefinedOptions {
content: Array<string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
ekstraktory?: Array<Extractors>;
fontFace?: boolean;
klatki kluczowe?: Boolean;
wyjście?: struna;
Odrzucone?: Boolean;
odrzuconeCss?: boolean;
Stdin?: Boolean;
Stdout?: Boolean;
zmienne?: Boolean;
safelist?: UserDefinedSafelist;
lista bloków?: StringRegExpArray;
}
interfejs RawContent {
rozszerzenie: struna
RAW: String
}
interfejs RawCSS {
RAW: String
}
type StringRegExpArray = Array<RegExp | string>;
typ ComplexSafelist = {
standard?: StringRegExpArray;
głębokie?: RegExp[];
chciwy?: RegExp[];
zmienne?: StringRegExpArray;
klatki kluczowe?: StringRegExpArray;
};
type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Jak pokazano poniżej:
Rozpocznij opublikowany projekt i zobacz go w swojej przeglądarcebootstrap.min.cssZoptymalizowany rozmiar to20,8 kb, jak pokazano na poniższym rysunku:
Oznacza to, że rozmiar pliku źródłowego bootstrap.min.css wynosi 163kb, używamy tylko stylu klas 20,8kb wewnątrz, a PurgeCSS nam pomagaUsunięto 142 kb zawartości。
(Koniec) |
Opublikowano 08.05.2024 19:13:56
|
|
|
|
Ziemianin|
Opublikowano 08.05.2024 21:07:25
|
