Los archivos CSS de su sitio web a veces pueden llegar a ser bastante grandes. Esto sucederá principalmente cuando cree nuevas clases sin eliminar las antiguas que ahora ha dejado de usar, lo que hace que el archivo CSS sea muy complicado para que otros colaboradores lo entiendan y modifiquen.
Esto también puede suceder si usa un tema prediseñado de WordPress. Aquí, sabremos cómo reducir el tamaño de su archivo CSS en una proporción considerable. Hay algunas herramientas disponibles para eliminar CSS no utilizado. Aquí, usaremos PurifyCSS .
requisitos previos:
- Se le pedirá que instale Node, se utilizará para ejecutar el código. Descargue e instale Node , que incluirá el administrador de paquetes incorporado NPM.
- También necesitará cualquier editor de texto y, si no tiene uno, intente usar Visual Studio Code .
Comprender cómo funciona PurifyCSS: PurifyCSS obtiene todos los archivos HTML a través de una variedad de archivos CSS. Significa que no podemos simplemente proporcionar nuestro archivo index.html , porque es posible que tengamos diferentes archivos HTML presentes a través de una variedad de plantillas en nuestro sitio web. La lista de archivos HTML luego revisará los archivos CSS proporcionados, como style.css y custom.css . En su caso, puede ser diferente, solo piense cuáles de sus archivos están usando los mismos archivos CSS. Las páginas similares luego se verificarán a través de archivos CSS. Si no lo hace, es posible que terminemos perdiendo los archivos CSS necesarios.
Instalación de PurifyCSS: instale Node y obtenga acceso a su administrador de paquetes, NPM. PurifyCSS tiene un paquete NPM incorporado para la instalación, instálelo ejecutando el siguiente comando en la terminal en el directorio raíz de la carpeta del proyecto:
npm i -D purify-css
Preparando nuestros archivos: Necesitaremos algunos archivos HTML junto con sus archivos CSS. En nuestro caso, suponemos que la mayor parte de nuestro CSS está en el archivo style.css .
En nuestro directorio raíz, creamos un archivo HTML para cada diseño HTML que queremos procesar:
- Página principal
- Práctica
- Concursos
- Pasantías
- Perfil
- trabajos
Después de crear los archivos de plantilla que coincidan con nuestro sitio web, simplemente cópielos y péguelos en los nuevos archivos que hemos creado en nuestro directorio. Luego hacemos lo mismo con el archivo CSS.
El directorio raíz de la herramienta de purificación se verá así:
- node_modules/
- practica.html
- concursos.html
- índice.html
- prácticas.html
- perfil.html
- empleos.html
- estilo.css
Creación del purificador de JavaScript: ahora, cree un nuevo archivo .js en el directorio raíz, como purifyMyCSS.js. Agregue el siguiente código JavaScript al archivo.
const purify = require("purify-css")
// Reference of all HTML files from root directory
let content = ['*.html'];
// Reference of all CSS files from root directory
let css = ['*.css'];
let files = {
// Write purified CSS into a file
output: 'purified.css',
minified: true, // Minify boolean
info: true // Output information
};
purify(content, css, files, function (purifiedAndMinifiedResult) {
console.log(purifiedAndMinifiedResult);
});
Esto es suficiente para el funcionamiento de PurifyCSS. Ahora simplemente ejecute el código usando Node.
Purificación: después de seguir los pasos anteriores, el CSS no utilizado se puede eliminar ejecutando el siguiente código en una terminal en el nivel del directorio raíz:
node purifyMyCss.js
Y eso es todo, obtendrás un resultado similar al siguiente:
Ahora obtendrá un nuevo archivo CSS llamado purified.css, simplemente copie el contenido de este archivo y péguelo en el archivo CSS de su sitio web.
Resumen:
PurifyCSS redujo alrededor del 70 % del CSS no utilizado de nuestros archivos, lo cual es bastante si tiene un sitio web grande como GeeksforGeeks . Pero, si tiene un sitio web de una sola página, entonces no necesita seguir todos estos pasos. Hay varias herramientas gratuitas en línea que puede utilizar. Uno de ellos es UNCSS, que te permite pegar contenido HTML en una entrada y contenido CSS en la otra. Presione el botón y su CSS acortado se agregará al cuadro de salida, cópielo y péguelo en el lugar deseado.