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.
Medir
Como siempre, es importante medir primero el rendimiento de un sitio web para intentar agregar optimizaciones.
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona
Pantalla completa
- Presiona `Control + Mayúsculas + J` (o `Command + Option + J` en Mac) para abrir Herramientas para desarrolladores.
- Haga clic en la pestaña Red.
- Selecciona la casilla de verificación Inhabilitar caché.
- Vuelve a cargar la app.
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:
- Escribir un método de orden personalizado en lugar de importar una biblioteca de terceros
- Usa el método integrado
Array.prototype.sort()para ordenar de forma numérica. - Solo importa el método
sortBydesdelodashy no toda la biblioteca. - 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.
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 .
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.
¡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.
- Carga diferida de módulos con Angular
- División de código con React Router
- Carga diferida con Vue Router
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.