Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

PurgeCSS: cómo reducir hojas de estilo CSS, eliminando los selectores que sobran

Aunque todo profesional del desarrollo Web que se precie debe dominar HTML y CSS, la realidad es que en la mayor parte de los proyectos normalmente hacemos uso de alguna biblioteca o framework CSS, como por ejemplo Bootstrap (que es la más utilizada) o herramientas similares.

Utilizar un framework CSS nos permite maquetar muy rápido, dar un aspecto atractivo por defecto a las aplicaciones, y tener ya hechas muchas cosas complicadas. Pero, por otro lado, utilizar un framework implica que estamos añadiendo gran cantidad de cosas a la aplicación que jamás vamos a utilizar.

Por ejemplo, si creas una aplicación sencilla con Bootstrap utilizando tan solo la facilidad de maquetación con su rejilla (aunque hoy en día con CSS Grid y Flexbox no lo necesitarías) y tomando el aspecto por defecto de botones y cuadros de texto, estarás añadiendo a la aplicación unos 156KB de tamaño con la versión minimizada del CSS de Boostrap. Sin embargo, si analizas el uso real que estás haciendo de las reglas incluidas, verás que es mínimo y te llegaría con un porcentaje pequeño del contenido de ese archivo.

Lo puedes ver en este mini-vídeo en el que tengo una página muy sencilla con unas cuantas secciones para maquetar texto e imágenes, abro la página en Chrome y empleo su herramienta para análisis de cobertura de código:

Como puedes comprobar, casi el 96% del código de la hoja de estilos de Bootstrap no se utiliza para nada. El resto, para esta página en concreto, no lo necesitamos.

Pero claro, hacer esto manualmente es una tarea propensa a errores y, además, lamentablemente las herramientas de cobertura de Chrome no nos dejan exportar a un archivo tan solo lo que se identifica como que está en uso.

En el siguiente vídeo te explico paso a paso cómo puedes sacar partido a la estupenda herramienta PurgeCSS para automatizar el análisis y limpieza de los archivos CSS que emplee tu aplicación web Front-End y acabar con aplicaciones más ligeras y más rápidas. Para ello utilizo un pequeño sitio web con algunas páginas bastante complejas, y que se apoya en el uso de diversas bibliotecas y mucho CSS.

Vamos a verlo:

Todo lo explicado se puede automatizar con npm, Gulp o Webpack e incorporarlo al proceso de desarrollo de tu aplicación.

Descarga el ejemplo con todos los archivos, desde aquí (ZIP, ~4MB)

Puedes aprender a dominar todas estas herramientas de desarrollo Front-End y muchas más, para ser mejor profesional, con nuestro curso de Herramientas modernas para desarrollo Web Front-End empresarial. Háblalo con tu empresa o invierte por tu cuenta en mejorar tu perfil profesional 😉

¡Espero que te resulte útil!

José M. Alarcón Aguín Fundador de campusMVP, es ingeniero industrial y especialista en consultoría de empresa. Ha escrito diversos libros, habiendo publicado hasta la fecha cientos de artículos sobre informática e ingeniería en publicaciones especializadas. Microsoft lo ha reconocido como MVP (Most Valuable Professional) en desarrollo web desde el año 2004 hasta la actualidad. Puedes seguirlo en Twitter en @jm_alarcon o leer sus blog técnico o personal. Ver todos los posts de José M. Alarcón Aguín
Archivado en: Desarrollo Web

Boletín campusMVP.es

Solo cosas útiles. Una vez al mes.

🚀 Únete a miles de desarrolladores

DATE DE ALTA

x No me interesa | x Ya soy suscriptor

La mejor formación online para desarrolladores como tú

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.