Quita el código que no se use

Los registros como npm transformaron el mundo de JavaScript para bien, ya que permiten que cualquier persona descargue y use más de medio millón de paquetes públicos. Pero, a menudo, incluimos bibliotecas que no usamos por completo. Para corregir este problema, analiza tu paquete para detectar el código que no se usa y, luego, quita las bibliotecas no utilizadas y innecesarias.

Si quitas el código que no se usa, puedes mejorar las Métricas web esenciales de tu sitio web. Por ejemplo, Largest Contentful Paint puede verse afectada por el código no utilizado cuando los recursos innecesariamente grandes compiten por el ancho de banda con otros recursos. El LCP también puede verse afectado si los recursos de JavaScript grandes que renderizan el marcado solo en el cliente contienen referencias a candidatos de LCP, ya que retrasan el momento en que se pueden cargar estos recursos.

El código sin usar también puede afectar a la Interaction to Next Paint (INP), ya que incluso el código JavaScript sin usar se debe descargar, analizar, compilar y, luego, ejecutar. El código sin usar puede generar retrasos innecesarios en el tiempo de carga de recursos, el uso de memoria y la actividad del subproceso principal, que contribuyen a una respuesta deficiente 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 no utilizado y se ofrecen estrategias para eliminar el código no utilizado de los recursos de JavaScript que envías a tus usuarios en producción.

Analiza tu paquete

DevTools puede mostrarte el tamaño de todas las solicitudes de red:

  1. Presiona "Control + Mayúsculas + J" (o "Comando + Opción + J" en Mac) para abrir DevTools.
  2. Haga clic en la pestaña Red.
  3. Selecciona la casilla de verificación Inhabilitar caché.
  4. Vuelve a cargar la página.
Panel de red con solicitud de paquete
Herramientas para desarrolladores que muestran el tamaño de un archivo JavaScript.

La pestaña Cobertura en DevTools también te indica cuánto código CSS y JS de tu aplicación no se usa.

Cobertura de código en DevTools
La pestaña Cobertura.

Si especificas una configuración completa de Lighthouse a través de su Node CLI, puedes ejecutar la auditoría Reduce unused JavaScript para rastrear la cantidad de código sin usar que se envía con tu aplicación.

Informe Reduce el código JavaScript sin usar de Lighthouse
Reduce el informe de JavaScript sin usar.

Si usas webpack como agrupador, Webpack Bundle Analyzer puede ayudarte 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 comúnmente para compilar aplicaciones de una sola página, otros empaquetadores, como Parcel y Rollup, también tienen herramientas de visualización que puedes usar para analizar tu paquete.

Si vuelves a cargar la aplicación con este complemento incluido, se mostrará un mapa de árbol que se puede acercar y alejar de todo el paquete.

Webpack Bundle Analyzer
Vista de árbol del analizador de paquetes de Webpack.

Esta visualización muestra qué partes del 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 ayudarte a identificar si usas bibliotecas que no se usan o que no son necesarias.

Quita las bibliotecas que no se usan

En la imagen del mapa de árbol anterior, hay bastantes paquetes dentro de un solo dominio @firebase. Si tu sitio web solo necesita el componente de la 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 seguridad que no se usa en ningún lugar, da un paso atrás y observa cuál de tus dependencias de nivel superior lo está usando. Intenta encontrar una forma de importar solo los componentes que necesitas. Si no usas una biblioteca, quítala. Si la biblioteca no es necesaria para la carga inicial de la página, considera usar la carga diferida.

Si usas webpack, consulta la lista de complementos que quitan automáticamente el código no utilizado de bibliotecas populares.

Quita las bibliotecas innecesarias

No todas las bibliotecas se pueden dividir en partes y, luego, importarlas de forma selectiva. En estas situaciones, considera si puedes quitar la biblioteca por completo. Compilar una solución personalizada o aprovechar una alternativa más ligera siempre debe ser opciones que vale la pena tener en cuenta. Sin embargo, es importante considerar la complejidad y el esfuerzo requerido para cualquiera de estas estrategias antes de quitar una biblioteca por completo de tu app.