npm simplifica el proceso para agregar código a tu proyecto. Pero, ¿estás usando todos esos bytes adicionales?
Los registros como npm transformaron el mundo de JavaScript para mejorar, ya que permiten que cualquier persona descargue y use fácilmente 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 sin usar. 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. El Largest Contentful Paint, por ejemplo, puede verse afectado por el código no utilizado debido a una mayor contención de ancho de banda causada por recursos más grandes que los necesarios. El LCP también puede verse afectado si los elementos grandes de JavaScript que renderizan lenguaje de marcado solo en el cliente contienen referencias a candidatos de LCP por retrasar cuándo se pueden cargar estos recursos.
Otras métricas, como el retraso de primera entrada (FID) y la interacción hasta la próxima pintura (INP), también pueden verse afectadas por el código que no se usa, ya que incluso el código JavaScript que no se usa debe descargarse, analizarse, compilarse y, luego, ejecutarse. 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, aprenderás a analizar la base de código de tu proyecto y se ofrecen estrategias para reducir el código sin usar de los recursos de JavaScript que envías a los usuarios en producción.
Analiza tu paquete
Herramientas para desarrolladores facilita la visualización del 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 las Herramientas para desarrolladores, también se te indicará la cantidad de código CSS y JS de tu aplicación que no se usa.
Si especificas una configuración completa de Lighthouse con la CLI de Node, también se puede usar una auditoría de "JavaScript sin usar" para hacer un seguimiento de la cantidad de código sin usar que se envía con tu aplicación.
Si usas webpack como agrupador, Webpack Bundle Analyzer te ayudará a investigar los componentes del 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.
Usar esta visualización te permite inspeccionar qué partes de tu paquete son más grandes que otras y tener una mejor idea de todas las bibliotecas que importas. 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';
Es importante enfatizar que este proceso es significativamente más complejo para aplicaciones más grandes.
Para el 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 requiere la biblioteca para la carga inicial de la página, piensa si se puede cargar de forma diferida.
Además, en caso de que utilices un paquete web, consulta la lista de complementos que quitan automáticamente el código sin usar de las bibliotecas populares.
Quita las bibliotecas innecesarias
No todas las bibliotecas se pueden dividir fácilmente en partes para importarlas de forma selectiva. En estas situaciones, considera si la biblioteca se podría quitar por completo. Desarrollar una solución personalizada o aprovechar una alternativa más ligera siempre deben ser opciones que vale la pena considerar. Sin embargo, es importante sopesar la complejidad y el esfuerzo necesarios para cualquiera de estos esfuerzos antes de quitar por completo una biblioteca de una aplicación.