Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Subir Dramáticamente la velocidad de tu Aplicación React front-end Usando Carga Perezosa

by
Difficulty:AdvancedLength:MediumLanguages:

Spanish (Español) translation by Jean Perez (you can also view the original English article)

Un constante desafío que enfrentan los desarrolladores de front-end es el rendimiento de nuestras aplicaciones. ¿Cómo podemos entregar una aplicación robusta y completa a nuestros usuarios sin forzarlos a esperar una eternidad para cargar la página? Las técnicas utilizadas para la velocidad de un sitio web son tan numerosas que a menudo puede ser confuso decidir dónde enfocar nuestra energía al optimizar el rendimiento y velocidad.

Afortunadamente, la solución no es tan complicada como parece a veces. En este post voy a avería una de las técnicas más efectivas utilizadas por aplicaciones web grandes para acelerar su experiencia de usuario. Voy a ir en un paquete para facilitar esto y garantizar que podemos entregar nuestra aplicación a usuarios más rápidos sin ellos darse cuenta de que nada ha cambiado.

¿Qué Significa Que un Sitio Web Ser Rápido?

La cuestión del rendimiento de web es tan profunda como es amplio. Por el bien de este post voy a probar y definir el rendimiento en los términos más simples: enviar tan poco como sea posible tan rápido como puedas. Por supuesto, esto podría ser una simplificación del problema, pero prácticamente hablando, podemos lograr mejoras en la velocidad dramática por simplemente enviar menos datos que el usuario descarga y envío de los datos rápido.

Con el propósito de este post me voy a centrar en la primera parte de esta definición, enviando la menor cantidad posible de información para el navegador del usuario.

Invariablemente, el delincuente más grande a la hora de frenar nuestras aplicaciones es imágenes y JavaScript. En este post voy a mostrar cómo resolver el problema de los paquetes de aplicación grande y la velocidad de nuestro sitio web en el proceso.

React Loadable

React Loadable es un paquete que nos permite carga perezosa nuestro JavaScript sólo cuando es requerido por la aplicación. Por supuesto, no todos los sitios web utilizan reaccionan, pero aras de la brevedad voy a centrar sobre la aplicación de que aplicación construida con Webpack prestados React Loadable en un servidor. El resultado final será JavaScript múltiples archivos entregan al navegador del usuario automáticamente cuando es necesario código.

Con nuestra definición de antes, esto simplemente quiere decir que enviar menos al usuario por adelantado para que los datos pueden descargarse más rápido y nuestro usuario experimentará un sitio más alto rendimiento.

1. Añadir React Loadable a Su Componente

Me quedo con un componente de ejemplo reaccione, MyComponent. Supondré que este componente está formado por dos archivos, MyComponent/MyComponent.jsx y MyComponent/index.js.

En estos dos archivos definir el componente reaccione exactamente como haría normalmente en MyComponent.jsx. En index.js, importe el componente reaccione y a la reexportación, esta vez envuelta en la función de Loadable. Mediante la función de import de ECMAScript, me pueden indicar a Webpack que espero que este archivo a ser cargado dinámicamente. Este patrón permite me carga perezosa fácilmente cualquier componente que ya he escrito. También me permite separar la lógica entre perezoso-cargamento y representación. Que podría sonido complicado, pero aquí es cómo esto sería en la práctica:

Entonces puedo importar mi componente exactamente como haría normalmente:

Yo ahora he introducido reaccionar Loadable en MyComponent. Puedo añadir más lógica a este componente más adelante si elijo - esto puede incluir la introducción de un estado de carga o un controlador de errores para el componente. Gracias Webpack, cuando ejecutamos nuestra estructura, que va ahora ser proporcionado con dos paquetes separados de JavaScript: app.min.js es nuestro paquete de aplicación regular y myComponent.min.js contiene el código que hemos escrito. Analizaré cómo ofrecer estos paquetes al explorador un poco más adelante.

2. Simplificar la Configuración con Babel

Normalmente, tendría que incluir dos opciones extras al pasar un objeto a la función de Loadable, modules y webpack. Estas Webpack ayudan a identifica que nos debemos entre los módulos. Afortunadamente, podemos obviar la necesidad de incluir estos dos opciones con cada componente utilizando el plugin de react-loadable/babel. Esto incluye automáticamente estas opciones para nosotros:

Puedo incluir este plugin añadiendo a mi lista de plugins en mi archivo .babelrc, así:

Ahora estoy un paso más cerca de nuestro componente de carga perezosa. Sin embargo, en mi caso estoy tratando con la representación del lado del servidor. Actualmente, el servidor no podrá rendir nuestros componentes cargadas de perezoso.

3. Representación Componentes en el Servidor

En mi aplicación de servidor tengo una configuración estándar que se ve algo como esto:

El primer paso va a ser para instruir a reaccionar Loadable que quiero todos los módulos a ser cargado. Esto me permite decidir cuáles deben colocarse inmediatamente en el cliente. Hago esto por modificar mi archivo server/index.js como sigue:

El siguiente paso va a ser para todos los componentes que quiero representar en una matriz por lo que más tarde podemos determinar que componentes requieren carga inmediata. Esto es así el código HTML se puede volver con los paquetes de JavaScript correcto incluidos vía etiquetas de secuencia de comandos (más sobre esto más adelante). Por ahora, voy a modificar mi archivo servidor así:

Cada vez se utiliza un componente que requiere reaccionar Loadable, se agregará a la matriz de módulos. Esto es un proceso automático realizado por reaccionar Loadable, así que esto es todo lo que se requiere de nuestra parte para este proceso.

Ahora tenemos una lista de módulos que tendrá que hacerse inmediatamente. El problema que ahora enfrentamos es mapeo de estos módulos para los paquetes que Webpack ha producido automáticamente para nosotros.

4. Asignación de Paquetes Webpack a Módulos

Así que ya he mandado Webpack para crear myComponent.min.js y sé que MyComponent se utiliza inmediatamente, por lo que necesito para cargar este paquete en la carga inicial de HTML que entregamos al usuario. Afortunadamente, React Loadable proporciona una manera para poder lograr esto, también. En mi archivo de configuración de cliente Webpack, necesito incluir un nuevo plugin:

El archivo loadable-manifest.json me proporcionará una asignación entre módulos y paquetes para que puedo usar el array de modules antes de configurar para cargar los paquetes sé que necesitaré. En mi caso este archivo podría ser algo como esto:

Esto también requerirá un archivo de manifiesto Webpack común incluir la correspondencia entre módulos y archivos para los propósitos internos de Webpack. Puedo hacer esto mediante la inclusión de otro plugin Webpack:

5. Como Empaquetarlo en Su HTML

El paso final en la carga de nuestros paquetes dinámicos en el servidor es incluirlos en el código HTML que entregamos al usuario. Para este paso voy a combinar la salida de los pasos 3 y 4. Puedo comenzar por modificar el archivo server que creó anteriormente:

En este he importado el manifiesto y pidió React Loadable para crear una matriz con las asignaciones de módulo/paquete. Lo único para mí hacerlo es rendir estos paquetes a una cadena HTML:

6. Carga los Paquetes Procesados por el Servidor en el Cliente

El paso final al uso de los paquetes que hemos cargado en el servidor es consumir en el cliente. Hacerlo es sencillo, sólo puedo instruir a React Loadable para cargar los módulos se encuentra inmediatamente disponible:

Conclusión

Tras este proceso, puedo dividir mi paquete de aplicación en paquetes más pequeños tantas como necesito. De esta manera, mi aplicación envía menos al usuario y sólo cuando lo necesitan. He reducido la cantidad de código que se envía de modo que pueden ser enviado más rápidamente. Esto puede tener ganancias de rendimiento importantes para aplicaciones más grandes. También pueden configurar aplicaciones más pequeñas de rápido crecimiento si fuera necesario se presentan.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.