Acceso

PurgeCSS, optimiza tus archivos CSS.

toscadev

@ ToscaDevsJS


Instalación de PurgeCSS en tu proyecto.

Para comenzar a utilizar PurgeCSS, primero debes instalarlo como una dependencia en tu proyecto.

npm install -D purgecss

Configuración de PurgeCSS

-CLI

package.json
{
  "name": "template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "purgecss": "purgecss --css assets/css/**/*.css --content index.html --output css/",
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "purgecss": "^5.0.0"
  }
}

Ejecución de PurgeCSS

Una vez que hayas configurado PurgeCSS, puedes ejecutarlo desde la línea de comandos para eliminar el CSS no utilizado en tu proyecto:

npm run purgecssPage

Esto generará un archivo CSS purgado en el directorio de salida que especificaste en tu configuración.


Beneficios de PurgeCSS

- Mejor rendimiento: Al eliminar el CSS no utilizado, tu archivo CSS será más pequeño, lo que se traduce en tiempos de carga más rápidos.

- Ahorro de ancho de banda: Un CSS más pequeño significa menos datos que se deben descargar, lo que reduce el uso de ancho de banda de tus usuarios.

- Experiencia de usuario mejorada: Los tiempos de carga más rápidos y una menor latencia contribuyen a una experiencia de usuario más fluida.



Alternativa de Ejecución mediante un archivo de configuración purgecss.config.js.

Una vez que PurgeCSS esté instalado, puedes configurarlo para que se ejecute en tu proyecto. Normalmente, esto implica la creación de un archivo de configuración, como purgecss.config.js, donde especificarás las rutas de tus archivos CSS, el contenido HTML de tu proyecto y la ubicación de la salida.

// purgecss.config.js
module.exports = {
  content: ["index.html"], // Archivo HTML que contiene tu aplicación
  css: ["assets/css/**/*.css"], // Rutas a tus archivos CSS
  output: "css/", // Directorio de salida para el CSS purgado
};

npx purgecss --config purgecss.config.js


Regresar al Blog.

© Copyright 2024 ToscaDevJS.