Los editores de Downcodes le ofrecen una guía práctica sobre cómo optimizar archivos JavaScript de más de 1 MB. Los archivos JS de gran tamaño afectarán seriamente la velocidad de carga de la página web y reducirán la experiencia del usuario. Este artículo presentará en detalle una variedad de métodos de optimización, incluida la compresión de código, la división de código, la agitación de árboles, la carga de CDN, la carga diferida, la carga asincrónica, etc., para ayudarlo a mejorar el rendimiento de la página web.
Los archivos JS que superen 1 MB se pueden optimizar y comprimir mediante varios métodos, como compresión de código, división de código, agitación de árboles, uso de CDN para cargar bibliotecas de terceros, carga diferida o carga asincrónica. Estas tecnologías pueden reducir significativamente el tamaño del archivo JavaScript, acelerar la carga de páginas web, mejorar la experiencia del usuario y mejorar las clasificaciones SEO.
Entre estos métodos, la división de código es una estrategia particularmente importante. La división de código le permite dividir un archivo JS grande en varios archivos más pequeños y cargar estos archivos solo cuando sea necesario. La ventaja de esto es que reduce la cantidad de datos en la carga de la primera página, acelerando así la carga de la página. Las herramientas modernas de compilación de front-end, como Webpack y Rollup, brindan soporte para división de código fácilmente configurable.
La compresión de código es la forma más directa y común de reducir el tamaño de un archivo JS. El proceso de compresión funciona eliminando todos los caracteres innecesarios del código fuente (como espacios, nuevas líneas y comentarios) y cambiando el nombre de las variables para reducir la cantidad de caracteres. Este proceso no cambia los resultados del código.
Compresión mediante herramientas y complementos: UglifyJS, Terser y Google Closure Compiler son varias herramientas de compresión de JavaScript populares. La mayoría de las herramientas de compilación de front-end modernas (como Webpack y Gulp) proporcionan complementos o formas de integrar estas herramientas de compresión. Compresión automática durante el proceso de compilación: integre los pasos de compresión en el proceso de compilación automatizado para garantizar que el código de producción esté siempre comprimido. Esto evita la compresión directamente en el código fuente y mantiene el código fuente legible y mantenible.La división de código le permite separar su base de código en fragmentos y cargar solo los fragmentos correspondientes cuando sea realmente necesario. Esto es especialmente importante para aplicaciones más grandes, ya que puede reducir el tiempo que tarda en cargarse la primera pantalla.
Utilice herramientas de empaquetado de módulos como Webpack: estas herramientas proporcionan opciones de configuración simples para lograr la división del código. Por ejemplo, Webpack implementa la importación dinámica a través de la sintaxis import(), lo que permite cargar código bajo demanda. División basada en enrutador: para aplicaciones de una sola página (SPA), la división de código basada en ruta es muy común. Cargue dinámicamente el script de la página correspondiente según la ruta visitada por el usuario, reduciendo la carga inicial de una gran cantidad de código inútil.La agitación de árboles es una técnica que reduce el tamaño del archivo final eliminando partes del código no utilizadas. Esto requiere que el código sea modular y use la sintaxis de los módulos ES, porque esto se puede analizar estáticamente durante el proceso de compilación y determinar qué exportaciones e importaciones se utilizan realmente.
Configure Webpack o Rollup para agitar árboles: estas herramientas a menudo habilitan automáticamente la agitación de árboles en modo de producción para ayudar a eliminar el código no utilizado. Tenga en cuenta los efectos secundarios del código: evite los efectos secundarios al escribir el código del módulo, ya que pueden impedir que las herramientas eliminen correctamente el código no utilizado.El uso de una CDN (Content Delivery Network) para cargar bibliotecas de terceros (como jQuery, React, etc.) puede reducir la carga en el servidor y reducir el tiempo de carga inicial de la aplicación. Esto también significa que los usuarios pueden cargar estas bibliotecas desde la memoria caché, lo que reduce aún más los tiempos de carga.
Elija una CDN con buen almacenamiento en caché: algunas, como Google CDN o Cloudflare, ofrecen servicios CDN para múltiples bibliotecas populares. Comparación del alojamiento propio con el alojamiento CDN: a veces, dependiendo de la ubicación geográfica de su base de usuarios, el alojamiento propio puede ser más propicio para el control y la optimización del rendimiento. Haga su elección después de sopesar los pros y los contras.El retraso o la carga asincrónica de código JavaScript no crítico garantiza que estos códigos no bloqueen la representación de la página. Este enfoque es especialmente eficaz para funciones que sólo se requieren cuando el usuario interactúa con ellas.
Utilizando atributos asíncronos y diferidos: HTML