Los registros como npm tienen transformó el mundo de JavaScript para mejor, ya que permitió que cualquiera descargar y usar más de medio millón de paquetes públicos. Pero, a menudo, incluimos las bibliotecas que no usamos por completo. Para solucionar este problema, analiza el paquete para detectar el código sin usar y, luego, quita las bibliotecas unused y las innecesarias.
Impacto en las Métricas web esenciales
Si quitas el código que no se usa, puedes mejorar el rendimiento de tu sitio web Métricas web esenciales. Largest Contentful Paint. Por ejemplo, pueden verse afectadas por código sin usar cuando los recursos competir por el ancho de banda con otros recursos. El LCP también puede verse afectado si es Recursos de JavaScript que renderizan el lenguaje de marcado solo en el cliente contienen referencias a candidatos de LCP debido a que retrasa el momento en que pueden cargarse estos recursos.
El código sin usar también puede afectar la Interacción con el siguiente procesamiento (INP). ya que incluso JavaScript sin usar se debe descargar, analizar, compilar y, luego, ejecutado. El código sin usar puede generar retrasos innecesarios en la carga de recursos tiempo, uso de memoria y actividad del subproceso principal que contribuyen a generar fallas en las páginas la capacidad de respuesta.
En esta guía, se explica cómo analizar la base de código de tu proyecto en busca de código sin usar. ofrece estrategias para reducir el código sin usar de los recursos JavaScript a los 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úsculas + J` (o `Command + Option + 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.
La pestaña Cobertura en Las Herramientas para desarrolladores también te indican cuánto código CSS y JS de tu aplicación no está en uso.
Si especificas una configuración completa de Lighthouse a través de su CLI de nodo, puedes ejecutar la auditoría de reducción de JavaScript sin uso 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, Analizador de paquetes de Webpack puede ayudarte a investigar qué constituye el paquete. Incluye el complemento en tu webpack como cualquier otro complemento:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
Si bien webpack se usa comúnmente para crear aplicaciones de una sola página, otras agrupadores, como Parcel y Rollup, también tiene herramientas de visualización que puedes usar para analizar tu paquete.
Volver a cargar la aplicación con este complemento incluido muestra un diagrama de árbol con zoom de todo el paquete.
Esta visualización demuestra qué partes de tu conjunto son más grandes que para 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 o bibliotecas innecesarias.
Quita las bibliotecas que no se usan
En la imagen del diagrama de árbol anterior, hay bastantes paquetes en un solo
@firebase. Si tu sitio web solo necesita el componente Firebase Database
Actualiza las importaciones para recuperar esa biblioteca:
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
El paquete de aspecto misterioso que sabes con certeza no se usa en cualquier lugar, retrocede y observa cuáles de tus dependencias de nivel superior y la usan. Intenta encontrar una manera de importar solo los componentes que necesitas. Si no usas una biblioteca, quítala. Si la biblioteca no es necesaria para la la carga inicial de la página, considera la carga diferida que la modifica.
Si usas webpack, consulta la lista de complementos que se aplican automáticamente Quita el código que no se use de 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 sencilla opciones que vale la pena considerar. Sin embargo, es importante considerar la complejidad y esfuerzo requerido para cualquiera de estas estrategias antes de quitar una biblioteca completamente desde tu app.