El código JavaScript que no se utiliza puede disminuir la velocidad de carga de tu página:
- Si JavaScript bloquea el procesamiento, el navegador debe descargar, analizar, compilar y evaluar la secuencia de comandos antes de continuar con el resto del trabajo necesario para renderizar la página.
- Incluso si JavaScript es asíncrono (no bloquea el procesamiento), el código compite por el ancho de banda con otros recursos mientras se descarga, lo que tiene implicaciones importantes de rendimiento. El envío de código sin usar a través de la red también es un desperdicio para los usuarios de dispositivos móviles que no tienen planes de datos ilimitados.
Cómo falla la auditoría de JavaScript sin usar
Lighthouse marca todos los archivos JavaScript con más de 20 kibibytes de código sin usar:
![Una captura de pantalla de la auditoría.](https://developer.chrome.com/static/docs/lighthouse/performance/unused-javascript/image/a-screenshot-the-audit-5e55ec7ebbacf.jpg?authuser=5&hl=es)
Cómo quitar JavaScript sin usar
Detecta JavaScript sin usar
La pestaña Cobertura de las Herramientas para desarrolladores de Chrome te ofrece un desglose por línea del código que no se usa.
La clase Coverage
de Puppeteer puede ayudarte a automatizar el proceso de detección de código sin utilizar y de extracción.
Herramienta de compilación que permite quitar código sin usar
Consulta las siguientes pruebas de Tooling.Report para descubrir si tu agrupador admite funciones que facilitan evitar o quitar el código que no se usa:
Orientación específica para pilas
Angular
Si usas Angular CLI, incluye mapas de origen en tu compilación de producción para inspeccionar tus paquetes.
Drupal
Se recomienda quitar los elementos de JavaScript que no se usen y solo adjuntar las bibliotecas de Drupal necesarias al componente o la página relevantes de una página. Consulta Cómo definir una biblioteca para obtener más detalles.
Joomla
Te recomendamos reducir o cambiar la cantidad de extensiones de Joomla que cargan código JavaScript sin usar en tu página.
Magento
Inhabilita el paquete de JavaScript integrado de Magento.
React
Si no estás renderizando el servidor, divide los paquetes de JavaScript con React.lazy()
.
De lo contrario, divide el código con una biblioteca de terceros, como loadable-components.
Vuelta
Si no estás renderizando el servidor y usas el router Vue, divide los paquetes por rutas de carga diferida.
WordPress
Puedes reducir o cambiar la cantidad de complementos de WordPress que cargan código JavaScript sin usar en tu página.
Recursos
- Código fuente de la auditoría Quita el código sin usar
- Quita el código que no se use
- Cómo agregar interactividad con JavaScript
- División de código
- Eliminación de código no muerto
- Código importado inactivo
- Cómo buscar código JavaScript y CSS sin uso en la pestaña Cobertura de las Herramientas para desarrolladores de Chrome
- clase:
Coverage