No usado

Recientemente escribí Esto es lo que pasa con las herramientas “CSS no utilizadas” , donde intenté enumerar todos los desafíos que cualquier herramienta tendría para encontrar CSS verdaderamente “no utilizado”. La idea general es que los selectores CSS coincidan con elementos en el DOM, y esos elementos en el DOM provienen de todo tipo de lugares: sus plantillas estáticas, plantillas dinámicas basadas en el estado del lado del servidor y, por supuesto, JavaScript, que puede manipular el DOM. de ninguna manera, incluido extraer elementos de API y de terceros.

Con todo eso en juego, ¿cómo puede una herramienta darnos una imagen verdaderamente precisa del CSS no utilizado, hasta el punto de que eliminar ese CSS no sea tan peligroso como dejarlo en paz?

Y yo dije:

Y, sin embargo, no creo que estas herramientas sean inútiles: son simplemente… herramientas . De hecho, su uso puede ser un paso positivo hacia un mejor código. Su uso dice OK, lo admito, tengo un poco de miedo de nuestro CSS. Puede utilizar esta herramienta para obtener una imagen amplia de cuál podría ser su CSS no utilizado y luego combinarlo con su propio conocimiento de su código base CSS para tomar decisiones más informadas.

Lo mantengo y vale la pena señalar algunos casos de uso exitosos.

Sarah Dayan acaba de escribir Cómo eliminé 250 KB de peso CSS muerto con PurgeCSS . Estaba usando Tailwind CSS , una biblioteca CSS atómica con la que mucha gente ha tenido éxito.

En mi caso, no solo cargué toda la biblioteca CSS de Tailwind, sino que también agregué varias variantes a algunos módulos. Eso terminó haciendo que el archivo CSS minimizado final pesara 259 KB (antes de GZip).

Es una décima parte de eso cuando se comprime con gzip, pero aún así, es mucho CSS. Tailwind recomienda usar PurgeCSS , y eso es lo que hizo Sarah. PurgeCSS no maneja ninguna de las cosas que mencioné, como variaciones de estado y JavaScript y demás, pero sí analiza los archivos estáticos que desee (tanto contenido como CSS) y realiza análisis a partir de ellos. Aún mejor, Sarah sabía que tenía algunos problemas con terceros, así que manejó esa situación específicamente:

PurgeCSS no puede detectar que necesito mantener selectores como .ais-Highlight, porque los componentes que lo usan solo aparecen en el DOM en tiempo de ejecución.

Entonces dividió parte de ese CSS y actualizó la configuración. Entonces…

Con esta nueva configuración, ¡mi archivo CSS final pasó de 259 KB a… 9 KB!

Me encanta. Usar la herramienta, estar muy consciente de lo que sucede en su sitio y tomar decisiones finales para obtener una victoria combinada.

Sarah también menciona cómo este concepto de CSS no utilizado está relacionado en espíritu con el concepto de JavaScript no utilizado. En JavaScript, se conoce como sacudida de árboles y, como lo expresa Jeremy Wagner :

La sacudida de árboles es una forma de eliminación de códigos muertos.

Confío mucho más implícitamente en las herramientas para sacudir árboles. Estas son herramientas escritas en JavaScript para mirar JavaScript y descubrir JavaScript que no se utiliza. Parece que la intersección de la tecnología no es tan amplia cuando hablamos de sacudir árboles. Aún así, podría haber cosas como terceros configurados que llamen a funciones públicas en su sitio o controladores de eventos directamente en elementos HTML. Esas cosas me parecen un poco más raras hoy en día, pero es sólo mi propia experiencia.