Reduce las cargas útiles de JavaScript con la división de código

La mayoría de las páginas web y las aplicaciones están compuestas por diferentes partes. En lugar de que envía todo el código JavaScript que componen la aplicación en cuanto se carga la página y se divide el código JavaScript en varios fragmentos mejora el rendimiento de la página.

En este codelab, se muestra cómo usar la división de código para mejorar el rendimiento de una una simple aplicación que ordena tres números.

Una ventana del navegador muestra una aplicación llamada Ordenador mágico con tres campos para ingresar números y un botón de ordenar.

Medir

Como siempre, es importante medir primero el rendimiento de un sitio web para intentar agregar optimizaciones.

  1. Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa pantalla completa
  2. Presiona `Control + Mayúsculas + J` (o `Command + Option + J` en Mac) para abrir Herramientas para desarrolladores.
  3. Haga clic en la pestaña Red.
  4. Selecciona la casilla de verificación Inhabilitar caché.
  5. Vuelve a cargar la app.

Panel de red que muestra un paquete de JavaScript de 71.2 KB.

71.2 KB de JavaScript solo para ordenar algunos números en una aplicación simple ¿Para qué me sirve esto?

En el código fuente (src/index.js), se importa y usa la biblioteca lodash. en esta aplicación. Lodash ofrece muchas funciones útiles pero aquí solo se usa un método del paquete. Instalar e importar dependencias completas de terceros en las que solo un que esa parte se usa es un error común.

Optimizar

Hay varias formas de recortar el tamaño del paquete:

  1. Escribir un método de orden personalizado en lugar de importar una biblioteca de terceros
  2. Usa el método integrado Array.prototype.sort() para ordenar de forma numérica.
  3. Solo importa el método sortBy desde lodash y no toda la biblioteca.
  4. Descarga el código para ordenarlo solo cuando el usuario haga clic en el botón.

Las opciones 1 y 2 son métodos perfectamente apropiados para reducir el tamaño del paquete (y probablemente tendría más sentido para una aplicación real). Sin embargo, estos son no se usa en este instructivo con el propósito de enseñar Ж.

Ambas opciones 3 y 4 ayudan a mejorar el rendimiento de esta aplicación. El Las siguientes secciones de este codelab abarcan estos pasos. Como con cualquier tipo de código en este instructivo, siempre intenta escribir el código por tu cuenta en lugar de copiarlo y pegarlo.

Importa solo lo que necesitas

Se deben modificar algunos archivos para importar solo el método desde lodash. Para comenzar, reemplaza esta dependencia en package.json:

"lodash": "^4.7.0",

con esto:

"lodash.sortby": "^4.7.0",

Ahora en src/index.js, importa este módulo específico:

import "./style.css";
import _ from "lodash";
import sortBy from "lodash.sortby";

Y actualiza la forma en que se ordenan los valores:

form.addEventListener("submit", e => {
  e.preventDefault();
  const values = [input1.valueAsNumber, input2.valueAsNumber, input3.valueAsNumber];
  const sortedValues = _.sortBy(values);
  const sortedValues = sortBy(values);

  results.innerHTML = `
    <h2>
      ${sortedValues}
    </h2>
  `
});

Vuelve a cargar la aplicación, abre Herramientas para desarrolladores y observa el panel Red. una vez más.

Panel de red que muestra un paquete de JavaScript de 15.2 KB.

Para esta aplicación, el tamaño del paquete se redujo por más de 4 veces con muy poco el trabajo, pero todavía hay más margen por mejorar.

División de código

webpack es una de las plataformas de código abierto más populares agrupadores de módulos usados hoy. En resumen, agrupa todos los módulos de JavaScript (como así como otros recursos) que conforman una aplicación web en archivos estáticos que pueden que el navegador puede leer.

El único paquete que se usa en esta aplicación se puede dividir en dos trozos:

  • Uno responsable del código que conforma la ruta inicial
  • Bloque secundario que contiene nuestro código de ordenación

Con el uso de importaciones dinámicas, un fragmento secundario puede ser cargado de forma diferida o se cargan a pedido. En esta aplicación, el código que compone el bloque puede ser solo se cargan cuando el usuario presiona el botón.

Comienza por quitar la importación de nivel superior del método de orden en src/index.js:

import sortBy from "lodash.sortby";

Luego, impórtalo dentro del objeto de escucha de eventos que se activa cuando se presiona el botón:

form.addEventListener("submit", e => {
  e.preventDefault();
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

El atributo import() forma parte de un proposal (actualmente en etapa 3 del proceso TC39) para incluir la capacidad de importar dinámicamente un módulo. webpack ya incluye compatibilidad con esto y sigue la misma sintaxis que de la propuesta.

import() muestra una promesa y, cuando se resuelve, el estado seleccionado módulo, que está dividido en un fragmento separado. Una vez finalizado el módulo Se muestra module.default para hacer referencia al valor predeterminado. exportación proporcionada por lodash. La promesa está encadenada con otro .then que Llama a un método sortInput para ordenar los tres valores de entrada. Al final del cadena de promesas,catch() se usa para manejar casos en los que se rechaza la promesa. debido a un error.

Lo último que debes hacer es escribir el método sortInput en el final del archivo. Debe ser una función que devuelva una función que toma el método importado desde lodash.sortBy. Luego, la función anidada puede ordenar los tres valores de entrada y actualizar el DOM.

const sortInput = () => {
  return (sortBy) => {
    const values = [
      input1.valueAsNumber,
      input2.valueAsNumber,
      input3.valueAsNumber
    ];
    const sortedValues = sortBy(values);

    results.innerHTML = `
      <h2>
        ${sortedValues}
      </h2>
    `
  };
}

Supervisar

Vuelve a cargar la aplicación por última vez y vigila Network de cerca. panel nuevamente. En cuanto la app se descarga, solo se descarga un pequeño paquete inicial .

Panel de red que muestra un paquete de JavaScript de 2.7 KB.

Después de presionar el botón para ordenar los números de entrada, el bloque que contiene se recupera y ejecuta el código de ordenamiento.

Panel de red que muestra un paquete de JavaScript de 2.7 KB seguido de un paquete de JavaScript de 13.9 KB

¡Observa cómo se siguen ordenando los números!

Conclusión

La división de código y la carga diferida pueden ser técnicas muy útiles para recortar el tamaño inicial del paquete de tu aplicación, lo que puede generar directamente tiempos de carga de la página mucho más rápidos. Sin embargo, hay aspectos importantes que se deben considerar a tener en cuenta antes de incluir esta optimización en tu postulación.

IU de carga diferida

Cuando se cargan de forma diferida módulos de código específicos, es importante considerar cómo se experiencia es para los usuarios con conexiones de red más débiles. Dividir y cargar un gran fragmento de código cuando un usuario envía una acción puede hacer que Parece que la aplicación dejó de funcionar, así que considera mostrar un de carga de trabajo de algún tipo.

Carga diferida de módulos de nodos de terceros

No siempre es el mejor enfoque para las dependencias de terceros de carga diferida en tus y depende de dónde los uses. Por lo general, los las dependencias se dividen en un paquete vendor independiente que puede almacenarse en caché no se actualizan con tanta frecuencia. Obtenga más información sobre cómo SplitChunksPlugin puede te ayudarán a hacerlo.

Carga diferida con un framework de JavaScript

Muchos frameworks y bibliotecas populares que usan webpack proporcionan abstracciones para hacen que la carga diferida sea más fácil que usar importaciones dinámicas en medio de y mantener la integridad de su aplicación.

Si bien es útil comprender cómo funcionan las importaciones dinámicas, siempre debes usar el recomendado por tu framework o biblioteca para realizar una carga diferida en módulos específicos.

Precarga y carga previa

Siempre que sea posible, aprovecha las sugerencias del navegador, como <link rel="preload">. o <link rel="prefetch"> para intentar cargar módulos críticos antes. webpack admite ambas sugerencias mediante el uso de comentarios mágicos en la importación. declaraciones. Esto se explica con más detalle en el Precarga los fragmentos críticos.

Carga diferida más que código

Las imágenes pueden ser una parte importante de una aplicación. Carga diferida de los que que estén en la mitad inferior de la página o fuera del viewport del dispositivo, pueden acelerar la velocidad de un sitio web. Leído más información sobre esto en la Lazysizes.