Todo lo que necesita saber sobre la división de código JavaScript

Sep 11, 2025

Cómo

[dieciséis]

Los sitios modernos a menudo combinan todos sus javascript en una sola, grande main.js texto. Esto contiene regularmente los scripts para todas sus páginas o rutas, incluso si los usuarios solo necesitan una pequeña parte para la página que están viendo.

Cuando se sirve JavaScript de esta manera, el rendimiento de carga de sus páginas web puede sufrir, especialmente con diseño web adaptable en dispositivos móviles. Así que vamos a arreglarlo implementando la división de código JavaScript.

Cómo codificar más rápido, encendedor JavaScript

¿Qué problema resuelve la división de código?

Cuando un navegador web ve un & lt; script & gt; Debe dedicar tiempo a descargar y procesar el JavaScript que está haciendo referencia. Esto puede sentirse rápido en los dispositivos de gama alta, pero la carga, el análisis y la ejecución del código de Javascript no utilizado puede tomar un tiempo en dispositivos móviles promedio con una red más lenta y una CPU más lenta. Si alguna vez ha tenido que iniciar sesión en Coffee-Shop o Hotel Wifi, sabe que las experiencias de red lenta pueden pasarle a todos.

Cada segundo puesto en espera en JavaScript para terminar de arrancar puede demorar qué tan pronto los usuarios pueden interactuar con su experiencia. Este es particularmente el caso si su UX se basa en JS para componentes críticos o incluso acoplar los manejadores de eventos para piezas simples de UI.

¿Necesito molestarme con la división de código?

Definitivamente vale la pena preguntarse si necesita codificar y dividir (si ha usado un simple Creador de sitios web Probablemente no lo hagas). Si su sitio requiere JavaScript para contenido interactivo (para funciones como cajones y carruseles de menú) o es una aplicación de una sola página que confía en los marcos de JavaScript para emitir UI, la respuesta es probable "Sí". Si vale la pena la división de código para su sitio, es una pregunta que necesitará para responderse a sí mismo. Usted entiende su arquitectura y cómo su sitio se carga mejor. Afortunadamente, hay herramientas disponibles para ayudarte aquí. Recuerde que si está implementando cambios en su sistema de diseño, guarde los cambios en su compartido almacenamiento en la nube Así que tu equipo puede ver.

Consigue ayuda

Para aquellos nuevos en la división de código JavaScript, Faro - El panel de auditorías en Herramientas de desarrolladores de Chrome: puede ayudar a brillar una luz sobre si este es un problema para su sitio. La auditoría que querrá buscar es reducir el tiempo de ejecución de JavaScript (documentado aquí ). Esta auditoría destaca todos los scripts en su página que puede demorar un usuario que interactúe con él.

[sesenta y cinco] PageSpeed Insights

Es una herramienta en línea que también puede resaltar el rendimiento de su sitio, e incluye datos de laboratorio de los datos del faro y del mundo real en el rendimiento de su sitio del informe de la experiencia de usuario de Chrome. Tu Alojamiento web El servicio puede tener otras opciones.

Cobertura de código en herramientas de desarrollador cromado.

Si parece que tiene scripts costosos que podrían ser mejor divididos, la próxima herramienta para mirar es la función de cobertura de código en las herramientas de cromo desarrollador (DevTools & GT; Menú superior derecho & GT; Más herramientas y gt; cobertura). Esto mide la cantidad de JavaScript (y CSS) no utilizados en su página. Para cada script resumido, DevTools mostrará los 'bytes no utilizados'. Este es un código que puede considerar dividir y cargar con perezosos cuando el usuario lo necesita.

Los diferentes tipos de división de código.

Hay algunos enfoques diferentes que puede tomar cuando se trata de la división de código JavaScript. Cuánto se aplican a su sitio tienden a variar según dependiendo de si desea dividir la página / la aplicación 'lógica' o dividir las bibliotecas / marcos de otros 'vendedores'.

Dinámico de división de código: Muchos de los módulos y dependencias de JavaScript de importación estáticamente "estadísticamente", de modo que estén agrupados en un archivo en el tiempo de construcción. La división del código 'dinámica' agrega la capacidad de definir puntos en su javascript que le gustaría dividir y cargar perezosos según sea necesario. Javascript moderno utiliza la dinámica. importar() Declaración para lograr esto. Cubriremos esto más en breve.

División del código del proveedor: Es poco probable que los marcos y las bibliotecas con la que confían (por ejemplo, reaccionar, angular, vue o alboroto) cambien en los scripts que envíe a sus usuarios, a menudo como la 'lógica' para su sitio. Para reducir el impacto negativo de la invalidación de caché para que los usuarios regresen a su sitio, puede dividir sus 'proveedores' en un script separado.

División de código de punto de entrada: Las entradas están iniciando puntos en su sitio o aplicación que una herramienta como WEBPACK puede ver para acumular su árbol de dependencia. La división por entradas es útil para las páginas donde la enrutación del lado del cliente no se usa o confía en una combinación de servidor y representación del lado del cliente.

Para nuestros propósitos en este artículo, nos concentraremos en la división del código dinámico.

Obtener las manos con la división de código

Vamos a optimizar el rendimiento de JavaScript de un Aplicación simple que ordena tres números. A través de la división de código: esta es una aplicación de mi colega Houssein Djireh. El flujo de trabajo que usaremos para hacer que nuestra carga de JavaScript sea medir rápidamente, optimizar y monitorear. Empieza aqui .

Medida de rendimiento

Antes de intentar agregar cualquier optimización, primero vamos a medir el rendimiento de nuestro JavaScript. Como la aplicación Magic Sanger está alojada en Glitch, utilizaremos su entorno de codificación. Aquí es cómo hacerlo:

Haga clic en el botón Mostrar en vivo.
Abra los DevTools presionando la opción CMD + + I / Ctrl + Shift + i.
Seleccione el panel de red.
Asegúrese de que el caché de deshabilitación esté marcado y vuelva a cargar la aplicación.

Esta aplicación simple parece estar usando 71.2 KB de JavaScript solo para ordenar unos pocos números. Eso ciertamente no parece correcto. En nuestra fuente src / index.js , la Biblioteca Utilidad de Lodash es importada y utilizamos ordenar por - Una de sus utilidades de clasificación, para ordenar nuestros números. Lodash ofrece varias funciones útiles, pero la aplicación solo utiliza un solo método. Es un error común para instalar e importar toda una dependencia de terceros cuando, en realidad, solo necesita usar una pequeña parte de ella.

Optimiza tu paquete

Hay algunas opciones disponibles para recortar nuestro tamaño de paquete JavaScript:

Escriba un método de clasificación personalizado en lugar de confiar en una biblioteca de ThirdParty.
Usar Array.Prototype.Sort () , que está integrado en el navegador.
Solo importa el ordenar por Método de Lodash en lugar de toda la biblioteca.
Solo descargue el código para ordenar cuando un usuario lo necesita (cuando hacen clic en un botón).

Las opciones 1 y 2 son apropiadas para reducir nuestro tamaño de paquete, probablemente tengan sentido para una aplicación real. Para propósitos de enseñanza, vamos a probar algo diferente. Las opciones 3 y 4 ayudan a mejorar el rendimiento de la solicitud.

Solo importan el código que necesita

Modificaremos algunos archivos para importar solo la única. ordenar por Método que necesitamos de alboroto. Vamos a empezar con reemplazar nuestro alboroto dependencia en Package.json :

"lodash": "^4.7.0",

con este:

"lodash.sortby": "^4.7.0",

En SRC / index.js, importaremos este módulo más específico:

 JS
Importar "./style.css";
Importar _ de "alboroto";
Import SORTBY DE "LODASH.SORTBY";

A continuación, actualizaremos cómo se ordenan los valores:

 JS
form.addeventlistener ("someter", e = & gt; {
  e.preventdefault ();
  valores const = [input1.valueasnumber, input2.valueasnumber, input3.valueasnumber];
  Const SortedValues = _.SortBy (Valores);
  const sortedvalues = sortby (valores);
  resultados.innerhtml = `
    & lt; H2 & GT;
      $ {Sortedvalues}
    & lt; / h2 & gt;
  '
});

Actualice la aplicación Magic Numbers, abra las herramientas del desarrollador y vea el panel de red nuevamente. Para esta aplicación específica, nuestro tamaño de paquete se redujo en una escala de cuatro con poco trabajo. Pero todavía hay mucho espacio para mejorar.

Splitting de código JavaScript

WEBPACK ES UNO DE LOS BUNDLERS MÓDULOS DE JAVASCRIPT MÁS UTILIZADOS QUE UTILIZAN LOS DESARROLLADORES WEB HOY. Se 'Bundles' (combina) Todos sus módulos de JavaScript y otros activos en archivos estáticos Los navegadores web pueden leer.

El paquete único en esta aplicación se puede dividir en dos scripts separados:

Uno es responsable del código que consigue la ruta inicial.
Otro contiene nuestro código de clasificación.

Utilizando importaciones dinámicas (con el importar() Palabra clave), un segundo script se puede cargar de forma perezosa. En nuestra aplicación Magic Numbers, el código que consigue el script se puede cargar según sea necesario cuando el usuario haga clic en el botón. Comenzamos eliminando la importación de nivel superior para el método de clasificación en src / index.js :

 Import SORTBY DE "LODASH.SORTBY";

Importarlo dentro del oyente de eventos que se dispara cuando se hace clic en el botón:

form.addeventlistener ("someter", e = & gt; {
  e.preventdefault ();
  Import ('LODASH.SUTBY')
    .Then (Module = & GT; Module.Default)
    .Ten (SortinPut ())
    .catch (err = & gt; {alerta (err)});
});

Esta dinámica importar() Característica que estamos usando es parte de una propuesta de StandardStrack por incluir la capacidad de importar dinámicamente un módulo en el estándar de idioma JavaScript. WEBPACK ya admite esta sintaxis. Puedes leer más sobre cómo funcionan las importaciones dinámicas. en este articulo .

los importar() La declaración devuelve una promesa cuando se resuelve. WebPack considera esto como un punto dividido que se dividirá en un script separado (o un trozo). Una vez devuelto el módulo, el module.default se utiliza para hacer referencia a la exportación predeterminada proporcionada por alboroto . La promesa está encadenada con otra. .entonces() llamando a un sortinput Método para ordenar los tres valores de entrada. Al final de la cadena de promesa, .captura() es llamado a manejar dónde se rechaza la promesa como resultado de un error.

En las aplicaciones de producción reales, debe manejar adecuadamente los errores de importación dinámicos. Los mensajes de alerta simple (similar a lo que se usa aquí) son lo que se usan y pueden no proporcionar la mejor experiencia de usuario para dejar que los usuarios sepa que algo salió mal.

En caso de que vea un error de pelea como "Error de análisis: la importación y la exportación solo puede aparecer en el nivel superior", sepa que esto se debe a la sintaxis de importación dinámica aún no se está finalizando. Aunque WEBPACK lo respalda, la configuración de ESLINT (una herramienta de pelusa JavaScript) utilizada por Glitch no se ha actualizado para incluir esta sintaxis, pero aún así funciona.

Lo último que debemos hacer es escribir el sortinput Método al final de nuestro archivo. Esto debe ser una función que devuelve una función que adopta el método importado de alboroto. . La función anidada puede ordenar los tres valores de entrada y actualizar el DOM:

 Const SortinPut = () = & gt; {
  Devolución (SORTBY) = & GT; {
    valores const = [
      entrada1.valueasnumber,
      input2.valueasnumber,
      entrada3.valueasnumber
    ];
    const sortedvalues = sortby (valores);
    resultados.innerhtml = `
      & lt; H2 & GT;
        $ {Sortedvalues}
      & lt; / h2 & gt;
    '
  };
}

Monitorear los números

Ahora vamos a volver a cargar la aplicación una última vez y mantener un ojo cercano en el panel de la red. Debe notar cómo se descarga un pequeño paquete inicial cuando se carga la aplicación. Una vez que se hace clic en el botón para ordenar los números de entrada, el script / chunk que contiene el código de clasificación se obtiene y se ejecuta. ¿Ves cómo los números aún se están ordenando, ya que esperaríamos que ellos?

JavaScript Código de división y carga perezosa Puede ser muy útil para recortar el tamaño inicial de su aplicación o sitio. Esto puede dar lugar directamente en tiempos de carga de página más rápidos para los usuarios. Aunque hemos visto agregar la división de código a una aplicación Vanilla Javascript, también puede aplicarla a las aplicaciones construidas con bibliotecas o marcos.

Carga perezosa con una biblioteca o marco de JavaScript

Muchos de los marcos populares admiten agregar la división de código y la carga perezosa con importaciones dinámicas y la mochila.

A continuación, le es la forma en que podría perezoso, cargar un componente "Descripción" de la película usando reaccionar (con Reaccionar.lazy () y su característica de suspenso) para proporcionar una "carga de carga ...", mientras que el componente está cargado por adelantado (ver aquí Para algunos detalles más):

 Reacciona de importación, {suspense} de 'reaccionar';
Const Descripción = React.Lazy (() = & gt; Importar ('./ Descripción'));
aplicación de función () {
  regreso (
    & lt; div & gt;
      & lt; h1 & gt; mi película & lt; / h1 & gt;
      & lt; Fallback de suspenso = "Cargando ..." & gt;
        & lt; descripción / & gt;
      & lt; / suspense & gt;
    & lt; / DIV & GT;
  )
}

La división del código puede ayudar a reducir el impacto de JavaScript en su experiencia de usuario. Definitivamente, considerelo si tiene paquetes de JavaScript más grandes y en caso de duda, no olvide medir, optimizar y monitorear.

Este artículo fue publicado originalmente en el número 317 de neto , la revista más vendida del mundo para diseñadores web y desarrolladores web. Comprar emito 317 aquí o Suscríbete aquí .

Artículos relacionados:

9 de los mejores marcos de JavaScript
15 herramientas esenciales de JavaScript que deberías estar usando
14 de las mejores API de JavaScript

Todo lo que necesita saber sobre la división de código JavaScript

¿Qué problema resuelve la división de código?

¿Necesito molestarme con la división de código?

Consigue ayuda

Cobertura de código en herramientas de desarrollador cromado.

Los diferentes tipos de división de código.

Obtener las manos con la división de código

Medida de rendimiento

Optimiza tu paquete

Solo importan el código que necesita

Splitting de código JavaScript

Monitorear los números

Carga perezosa con una biblioteca o marco de JavaScript

Cómo - Artículos más populares

Cómo detener el empañamiento de sus gafas al usar una mascarilla

Cómo refinar su portafolio de diseño

Imagen de trabajo Mascarilla Magic con Houdini

Cómo hacer y usar un Mahlstick para pintar

5 Nuevas características CSS calientes y cómo usarlas

Cómo pintar como un maestro del siglo XIX

Exportar After Effects Animations a HTML5

Cultive las plantas en Houdini

Categorías