Los registros como npm transformaron el mundo de JavaScript para mejor, ya que permiten que todos descarguen y usen más de medio millón de paquetes públicos. Pero, a menudo, incluimos bibliotecas que no usamos por completo. Para solucionar este problema, analiza tu paquete a fin de detectar el código que no se usa y, luego, quita las bibliotecas unused y las innecesarias.
Impacto en las Métricas web esenciales
Cuando quitas el código que no se usa, puedes mejorar las Métricas web esenciales de tu sitio web. La Largest Contentful Paint, por ejemplo, puede verse afectada por el código sin usar cuando elementos innecesariamente grandes compiten por el ancho de banda con otros recursos. El LCP también puede verse afectado si los recursos grandes de JavaScript que procesan el lenguaje de marcado solo en el cliente contienen referencias a los candidatos de LCP por retrasar cuándo se pueden cargar estos recursos.
El código que no se usa también puede afectar la Interacción con la siguiente pintura (INP), ya que incluso se debe descargar, analizar, compilar y ejecutar el código JavaScript que no se usa. El código que no se usa puede generar demoras innecesarias en el tiempo de carga de los recursos, el uso de memoria y la actividad del subproceso principal, que contribuyen a una mala respuesta de la página.
En esta guía, se explica cómo analizar la base de código de tu proyecto en busca de código sin usar y se ofrecen estrategias para reducirlo de los elementos de JavaScript que envías a los usuarios en producción.
Analiza tu paquete
Las Herramientas para desarrolladores pueden mostrarte el tamaño de todas las solicitudes de red:
- Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
- Haga clic en la pestaña Red.
- Selecciona la casilla de verificación Inhabilitar caché.
- Vuelve a cargar la página.
En la pestaña Cobertura de Herramientas para desarrolladores, también se indica la cantidad de código CSS y JS de tu aplicación que no se usa.
Especificando una configuración completa de Lighthouse con su CLI de Node, puedes ejecutar la auditoría de JavaScript sin usar para hacer un seguimiento de cuánto código sin usar se envía con tu aplicación.
Si usas webpack como agrupador, Webpack Bundle Analyzer puede ayudarte a investigar qué compone el paquete. Incluye el complemento en el archivo de configuración de webpack como cualquier otro complemento:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
Aunque webpack se usa por lo general para compilar aplicaciones de una sola página, otros agrupadores, como Parcel y Rollup, también tienen herramientas de visualización que puedes usar para analizar el paquete.
Cuando se vuelve a cargar la aplicación con el complemento incluido, se muestra un mapa de árbol (que se puede acercar) de todo el paquete.
Esta visualización muestra qué partes de tu paquete son más grandes que otras, de modo que puedas comprender mejor la cantidad y el tamaño de las bibliotecas que importa tu aplicación. Esto puede ayudar a identificar si estás usando bibliotecas no utilizadas o innecesarias.
Quita las bibliotecas que no se usan
En la imagen del diagrama de árbol anterior, hay varios paquetes dentro de un solo dominio @firebase. Si tu sitio web solo necesita el componente de base de datos de Firebase, actualiza las importaciones para recuperar esa biblioteca:
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
En el caso del paquete de aspecto misterioso que sabes con certeza que no se está usando en ningún lugar, da un paso atrás y observa cuáles de tus dependencias de nivel superior lo están usando. Intenta encontrar una manera de importar solo los componentes que necesitas. Si no usas una biblioteca, quítala. Si no se necesita la biblioteca para la carga inicial de la página, considera realizar una carga diferida.
Si usas webpack, consulta la lista de complementos que quitan automáticamente el código que no se usa de las bibliotecas populares.
Quita las bibliotecas innecesarias
No todas las bibliotecas se pueden dividir en partes para importar de forma selectiva. En estas situaciones, considera si puedes quitar la biblioteca por completo. Crear una solución personalizada o aprovechar una alternativa más simple siempre deben ser opciones que vale la pena considerar. Sin embargo, es importante sopesar la complejidad y el esfuerzo necesarios para cualquiera de estas estrategias antes de quitar una biblioteca por completo de tu app.