Skip to content
About Blog Aprender Explorar patronas Case studies
En esta página
  • Analizar tu paquete
  • Eliminar bibliotecas no utilizadas
  • Eliminar bibliotecas innecesarias

Eliminar el código no utilizado

El npm hace que agregar código a su proyecto sea muy sencillo. ¿Pero realmente estás usando todo esos bytes extra?

Nov 5, 2018
Available in: English, Português, Русский, 中文, 日本語 y 한국어
Appears in: Tiempos de carga rápidos
Houssein Djirdeh
Houssein Djirdeh
TwitterGitHubGlitchHomepage
En esta página
  • Analizar tu paquete
  • Eliminar bibliotecas no utilizadas
  • Eliminar bibliotecas innecesarias

Los registros como el npm han transformado el mundo de JavaScript para mejor, al permitir que cualquiera pueda descargar y usar fácilmente más de medio millón de paquetes públicos, pero a menudo incluimos bibliotecas que no estamos utilizando por completo. Para solucionar este problema, analice su paquete para detectar el código no utilizado. Posteriomente, elimine las bibliotecas no utilizadas e innecesarias.

Analizar tu paquete #

DevTools facilita ver el tamaño de todas las solicitudes de red:

  1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
  2. Click the Network tab.
  3. Select the Disable cache checkbox.
  4. Reload the page.
Panel de red con solicitud de paquete

La pestaña Cobertura en DevTools también le dirá cuánto código CSS y JS en su aplicación no es utilizado.

Cobertura de código en DevTools

Al especificar una configuración completa de Lighthouse a través de su Node CLI, también se puede utilizar una auditoría de "JavaScript no utilizado" para rastrear la cantidad de código no utilizado que viene con su aplicación.

Auditoría Lighthouse de JS no utilizado

Si está utilizando webpack para generar sus paquetes, Webpack Bundle Analyzer lo ayudará a investigar el contenido del el paquete. Incluya el complemento en el archivo de configuración webpack como cualquier otro complemento:

module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}

Aunque webpack se usa comúnmente para crear aplicaciones de una sola página, otros generadores de paquetes, como Parcel y Rollup, también tienen herramientas de visualización que puede utilizar para analizar su paquete.

Cargar de nuevo la aplicación con este complemento incluido, muestra un mapa de árbol ampliable de todo su paquete.

Webpack Bundle Analyzer

El uso de esta visualización le permite inspeccionar qué partes de su paquete son más grandes que otras, así como tener una mejor idea de todas las bibliotecas que está importando. Esto puede ayudar a identificar si está utilizando bibliotecas innecesarias o no utilizadas.

Eliminar bibliotecas no utilizadas #

En la imagen de mapa de árbol anterior, hay bastantes paquetes dentro de un solo dominio @firebase. Si su sitio web solo necesita el componente de base de datos firebase, actualice las importaciones para obtener 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 está bastante seguro de que no se está utilizando en ningún lugar, retroceda un paso y vea cuál de sus dependencias de nivel superior lo está usando. Intente encontrar una manera de importar solo los componentes que necesita. Si no está utilizando una biblioteca, elimínela. Si la biblioteca no es necesaria para la carga de la página inicial, considere si puede cargarse de forma diferida.

Y en caso de que esté utilizando webpack, consulte la lista de complementos que eliminan automáticamente el código no utilizado de las bibliotecas populares.

Pruebelo

Elimina el código no utilizado.

Eliminar bibliotecas innecesarias #

No todas las bibliotecas se pueden dividir fácilmente en partes e importar de forma selectiva. En estos casos, considere si la biblioteca podría eliminarse por completo. La creación de una solución personalizada o el aprovechamiento de una alternativa más ligera siempre deben ser opciones que valgan la pena considerar. Sin embargo, es importante sopesar la complejidad y el trabajo necesario para cualquiera de estos esfuerzos antes de eliminar una biblioteca por completo de una aplicación.

Rendimiento
Última actualización: Nov 5, 2018 — Mejorar el artículo
Codelabs

See it in action

Learn more and put this guide into action.

  • Remove unused code
Return to all articles
Compartir
suscribir

Contribute

  • Presentar un error
  • Ver fuente

Contenido relevante

  • developer.chrome.com
  • Chrome Actualizaciones
  • 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.