Skip to content
Aprender Medir Blog Case studies About
En esta página
  • Cómo falla la auditoría del JavaScript que no se utiliza
  • Cómo eliminar el JavaScript que no se utiliza
    • Detectar el JavaScript que no se utiliza
    • Cómo crear una herramienta de respaldo para eliminar el código que no se utiliza
  • Indicaciones específicas para cada categoría
    • Angular
    • Drupal
    • Joomla
    • Magento
    • React
    • Vue
    • WordPress
  • Recursos

Cómo eliminar el JavaScript que no se utiliza

Jul 7, 2020
Available in: Русский, English
En esta página
  • Cómo falla la auditoría del JavaScript que no se utiliza
  • Cómo eliminar el JavaScript que no se utiliza
    • Detectar el JavaScript que no se utiliza
    • Cómo crear una herramienta de respaldo para eliminar el código que no se utiliza
  • Indicaciones específicas para cada categoría
    • Angular
    • Drupal
    • Joomla
    • Magento
    • React
    • Vue
    • WordPress
  • Recursos

El JavaScript que no se utiliza puede reducir la velocidad de carga de la página:

  • Si el JavaScript es para bloquear la renderización, el navegador debe descargar, analizar, compilar y evaluar el script antes de que pueda proceder con el resto del trabajo que se necesita para renderizar la página.
  • Incluso si el JavaScript es asíncrono (es decir, no bloquea la renderización), el código compite por el ancho de banda con otros recursos mientras se descarga, lo cual tiene implicaciones muy importantes para el rendimiento. Asimismo, enviar el código que no se utiliza mediante la red es un derroche para los usuarios de dispositivos móviles que no disponen de planes de datos ilimitados.

Cómo falla la auditoría del JavaScript que no se utiliza #

Lighthouse etiqueta cada archivo de JavaScript con más de 20 kibibytes de código sin utilizar:

Una captura de pantalla de la auditoría
Haga clic en el valor de la columna URL para abrir el código fuente del script en una nueva pestaña.
See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

Cómo eliminar el JavaScript que no se utiliza #

Detectar el JavaScript que no se utiliza #

La pestaña Cobertura en Chrome DevTools puede darle un análisis línea por línea del código que no se utiliza.

La clase Coverage de Puppeteer puede ayudarle a automatizar el proceso para detectar códigos que no se utilizan y extraer el código utilizado.

Cómo crear una herramienta de respaldo para eliminar el código que no se utiliza #

Consulte las siguientes pruebas de Tooling.Report para determinar si su compactador es compatible con las funciones que hacen más sencillo evitar o eliminar el código sin utilizar:

  • Dividir el código
  • Eliminar códigos que no se utilizan
  • Código de importación que no se utiliza

Indicaciones específicas para cada categoría #

Angular #

Si utiliza Angular CLI, incluya mapas de origen para crear su producción e inspeccionar sus paquetes.

Drupal #

Considere la posibilidad de eliminar los activos de JavaScript que no se utilicen y adjunte solo las bibliotecas de Drupal necesarias para la página o el componente correspondiente de una página. Consulte la sección Cómo definir una biblioteca para obtener más información.

Joomla #

Considere la posibilidad de reducir, o cambiar, el número de extensiones de Joomla que cargan el JavaScript y no se utilizan en su página.

Magento #

Desactive la compactación de JavaScript incorporada en Magento.

React #

Si no renderiza el lado del servidor, divida sus paquetes de JavaScript con React.lazy(). De lo contrario, divida el código mediante una biblioteca de terceros como loadable-components.

Vue #

Si no renderiza en el lado del servidor y utiliza el enrutador Vue, divida los paquetes por rutas de carga diferida.

WordPress #

Considere la posibilidad de reducir, o cambiar, el número de complementos de Joomla que cargan el JavaScript y no se utilizan en su página.

Recursos #

  • Código fuente para Eliminar el código que no se utiliza en la auditoría
  • Eliminar el código que no se utiliza
  • Agregar interactividad con JavaScript
  • Dividir el código
  • Eliminar códigos inactivos
  • Código importado inactivo
  • Encontrar el código de JavaScript y CSS que no se utiliza con la pestaña Cobertura en Chrome DevTools
  • clase: Coverage
Última actualización: Jul 7, 2020 — Mejorar el artículo
Return to all articles
Compartir
suscribir

Contribute

  • Presentar un error
  • Ver fuente

Contenido relevante

  • developer.chrome.com
  • Chrome Actualizaciones
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos los productos
  • Condiciones y privacidad
  • Principios de la Comunidad

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.