Requisitos: En un proyecto, casi todos los frameworks de front-end se referencian, como: TailwindCSS, Bootstrap, MaterializeCSS, Foundation, etc.; solo podemos usar algunos estilos CSS en él, y al publicar, podemos eliminar código CSS no utilizado, por lo queAcelerar el acceso a sitios web, ahorrar ancho de banda y memoria del navegadorEsperar.
PurgeCSS es una herramienta para eliminar CSS no utilizado. Puede formar parte de tu flujo de trabajo de desarrollo.
Cuando construyes una web, puedes decidir usar un framework CSS como TailwindCSS, Bootstrap, MaterializeCSS, Foundation, etc...... Pero solo usarás una pequeña parte del framework y contendrás muchos estilos CSS sin usar.
Aquí es donde entra PurgeCSS. PurgeCSS analiza tu contenido y los archivos CSS. Luego empareja los selectores usados en el archivo con los del archivo de contenido. Elimina los selectores no utilizados de CSS, lo que resulta en archivos CSS más pequeños.
Sitio web:El inicio de sesión del hipervínculo es visible.
Dirección de GitHub:El inicio de sesión del hipervínculo es visible.
Primero, podemos instalar el paquete PurgeCSS globalmente usando npm con el siguiente comando:
Crea un nuevo proyecto MVC ASP.NET Core usando VS, y el proyecto usará el estilo Bootstrap 5 por defecto y cargará desde el navegadorbootstrap.min.cssTamaño del archivo163kb, el proyecto inicial es el siguiente:
Empieza a optimizar con PurgeCSS, creando uno nuevo en la raíz del proyectopurgecss.config.jsEl archivo de configuración dice lo siguiente:
La referencia del archivo de configuración PurgeCSS es la siguiente:
interface UserDefinedOptions {
contenido: Matriz <cadena | RawContent>;
css: Array <string | RawCSS>;
defaultExtractor?: ExtractorFunction;
¿extractores?: Matriz<Extractors>;
fontFace?: booleano;
¿fotogramas clave?: booleano;
¿salida?: cuerda;
¿rechazado?: booleano;
¿rechazados Css?: booleano;
¿stdin?: booleano;
¿Año de Apoyo?: Booleano;
¿variables?: booleana;
¿lista segura?: UserDefinedSafelist;
¿lista de bloqueos?: StringRegExpArray;
}
interface RawContent {
extensión: cadena
raw: string
}
interface RawCSS {
raw: string
}
tipo StringRegExpArray = Array<RegExp | cadena>;
tipo ComplexSafelist = {
¿estándar?: StringRegExpArray;
¿profundo?: RegExp[];
¿codicioso?: RegExp[];
¿variables?: StringRegExpArray;
¿fotogramas clave?: StringRegExpArray;
};
tipo UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
Como se muestra a continuación:
Inicia el proyecto publicado y véalo en tu navegadorbootstrap.min.cssEl tamaño optimizado es20,8 kb, como se muestra en la figura siguiente:
Esto significa que el tamaño del archivo fuente bootstrap.min.css es de 163kb, y solo usamos el estilo de clase de 20,8kb en su interior, y PurgeCSS nos ayudaSe eliminaron 142 kb de contenido。
(Fin) |
Publicado en 8/5/2024 19:13:56
|
|
|
|
Propietario|
Publicado en 8/5/2024 21:07:25
|
