Exigences : Dans un projet, presque tous les frameworks front-end sont référencés, tels que : TailwindCSS, Bootstrap, MaterializeCSS, Foundation, etc. Nous pouvons n’utiliser que certains styles CSS dans ce projet, et lors de la publication, nous pouvons supprimer le code CSS inutilisé, ainsiAccélérer l’accès aux sites web, économiser de la bande passante et de la mémoire du navigateurAttendre.
PurgeCSS est un outil pour supprimer le CSS inutilisé. Cela peut faire partie de votre flux de travail de développement.
Lorsque vous créez un site web, vous pouvez décider d’utiliser un framework CSS comme TailwindCSS, Bootstrap, MaterializeCSS, Foundation, etc...... Mais vous n’utiliserez qu’une petite partie du framework et contiendrez beaucoup de styles CSS inutilisés.
C’est là que PurgeCSS entre en jeu. PurgeCSS analyse votre contenu et vos fichiers CSS. Il associe ensuite les sélecteurs utilisés dans le fichier à ceux du fichier de contenu. Il supprime les sélecteurs inutilisés du CSS, ce qui donne des fichiers CSS plus petits.
Site internet:La connexion hyperlientérée est visible.
Adresse GitHub :La connexion hyperlientérée est visible.
Tout d’abord, nous pouvons installer globalement le package PurgeCSS en utilisant npm avec la commande suivante :
Créez un nouveau projet MVC ASP.NET Core en utilisant VS, et le projet utilisera par défaut le style Bootstrap 5 et se chargera dans le navigateurbootstrap.min.cssTaille du fichier163kb, le projet de départ est le suivant :
Commencez à optimiser avec PurgeCSS, en créant un nouveau dans la racine du projetpurgecss.config.jsLe fichier de configuration s’affiche comme suit :
La référence du fichier de configuration PurgeCSS est la suivante :
interface UserDefinedOptions {
contenu : Réseau <chaîne | RawContent> ;
css : String < tableaux | RawCSS> ;
defaultExtractor ? : ExtractorFunction ;
extracteurs ? : Réseau <Extractors>;
fontFace ? : booléen ;
images clés ? : booléen ;
sortie ? : corde ;
rejeté ? : booléen ;
rejetésCss ? : booléen ;
stdin ? : booléen ;
Arrêt ? : Booléen ;
variables ? : booléen ;
liste sûre ? : UserDefinedSafelist ;
liste de blocage ? : StringRegExpArray ;
}
interface RawContent {
extension : chaîne
raw : string
}
interface RawCSS {
raw : string
}
type StringRegExpArray = Array<RegExp | chaîne> ;
type ComplexSafelist = {
standard ? : StringRegExpArray ;
deep ? : RegExp[] ;
gourmand ? : RegExp[] ;
variables ?: StringRegExpArray ;
images clés ? : StringRegExpArray ;
};
type UserDefinedSafelist = StringRegExpArray | ComplexSafelist ;
Comme montré ci-dessous :
Démarrez le projet publié et visualisez-le dans votre navigateurbootstrap.min.cssLa taille optimisée est20,8 kb, comme montré dans la figure ci-dessous :
Cela signifie que la taille du fichier source bootstrap.min.css est de 163 ko, et que nous n’utilisons que le style de classe de 20,8 ko à l’intérieur, et PurgeCSS nous aide142 kb de contenu ont été supprimés。
(Fin) |
Publié sur 08/05/2024 19:13:56
|
|
|
|
Propriétaire|
Publié sur 08/05/2024 21:07:25
|
