Optimizar el rendimiento de una aplicación Vue con componentes asíncronos – SitePoint

¿Quieres aprender Vue.js desde cero? Obtenga una colección completa de libros de Vue que cubren aspectos fundamentales, proyectos, consejos y herramientas y más con SitePoint Premium. Únase ahora por solo $ 9 / mes o pruebe nuestra prueba gratuita de 7 días .

Las aplicaciones de una sola página a veces cobran un poco de su carga inicial lenta. Esto se debe a que, tradicionalmente, el servidor enviará un gran paquete de JavaScript al cliente, que debe descargarse y analizarse antes de que se muestre algo en la pantalla. Como puede imaginar, a medida que su aplicación aumenta de tamaño, esto puede volverse cada vez más problemático.

Por suerte, al crear una aplicación Vue utilizando Vue CLI (que usa un paquete web debajo del capó), hay una serie de medidas que se pueden Tomar para contrarrestar esto. En este artículo, demostraré cómo hacer uso de los componentes asíncronos y la funcionalidad de división de código del paquete web para cargar en partes de la página después del procesamiento inicial de la aplicación. Esto mantendrá el tiempo de carga inicial al mínimo y le dará a su aplicación una sensación más ágil.

Para seguir este tutorial, necesita un conocimiento básico de Vue.js y opcionalmente Node.js.

Componentes asíncronos

Antes nos sumergimos en la creación de componentes asíncronos, echemos un vistazo a cómo normalmente cargamos un componente. Para hacerlo, usaremos un componente de mensaje muy simple:



  

¡Nuevo mensaje!

Ahora que hemos creado nuestro componente, cargémoslo en nuestro archivo App.vue y lo mostraremos . Solo podemos importar el componente y agregarlo a la opción de componentes para poder usarlo en nuestra plantilla:



  
importar mensaje desde "./Message"; por defecto de exportación   componentes: {     Mensaje   } };

¿Pero que pasa ahora? El componente Mensaje se cargará cada vez que se carga la aplicación, por lo que se incluye en la carga inicial.

Esto puede no parecer un gran problema para una aplicación simple, pero considere algo más complejo como una red almacenar. Imagine que un usuario agrega elementos a una canasta, luego desea retirar, así que haga clic en el botón de pago que muestra un cuadro con todos los detalles de los elementos seleccionados. Usando el método anterior, esta casilla de verificación se incluirá en el paquete inicial, aunque solo necesitamos el componente cuando el usuario hace clic en el botón de verificación. Incluso es posible que el usuario navegue por el sitio web sin hacer clic en el botón de pago, lo que significa que no tiene sentido desperdiciar recursos al cargar este componente potencialmente no utilizado.

Para mejorar la eficiencia de la aplicación, podemos combinar ambos Técnicas de carga diferida y división de código.

La carga diferida consiste en retrasar la carga inicial de un componente. Puede ver la carga perezosa en acción en sitios como medium.com, donde las imágenes se cargan justo antes de ser requeridas. Esto es útil, ya que no tenemos que desperdiciar recursos cargando todas las imágenes para una publicación en particular al principio, ya que el lector puede omitir el artículo hasta la mitad.

La función de división de código que proporciona webpack le permite dividir su código en varios paquetes que luego se pueden cargar a pedido o en paralelo en un momento posterior. Se puede usar para cargar piezas de código específicas solo cuando se requieren o se usan.

Importaciones dinámicas

Por suerte, Vue atiende este escenario utilizando algo llamado importaciones dinámicas . Esta función introduce una nueva forma de importación similar a una función que devolverá una Promesa que contiene el componente solicitado (Vue). Como la importación es una función que recibe una cadena, podemos hacer cosas poderosas como cargar módulos usando expresiones. Las importaciones dinámicas están disponibles en Chrome desde la versión 61. Se puede encontrar más información sobre ellas en el sitio web de Google Developers .

La división del código está a cargo de paquetes como webpack, Rollup o Parcel, que comprenda la sintaxis de importación dinámica y cree un archivo separado para cada módulo importado dinámicamente. Lo veremos más adelante en la pestaña de red de nuestra consola. Pero primero, echemos un vistazo a la diferencia entre una importación estática y una dinámica:

 // importación estática
importar mensaje desde "./Message";

// importación dinámica
importar ("./ Mensaje"). luego (Mensaje => {
  // El módulo de mensajes está disponible aquí ...
});

Ahora, apliquemos este conocimiento a nuestro componente Message y obtendremos un componente App.vue que tiene este aspecto:



  
import Mensaje desde "./Mensaje"; por defecto de exportación   componentes: {     Mensaje: () => importar ("./ Mensaje")   } };

Como puede ver, la función import () resolverá una Promesa que devuelve el componente, lo que significa que hemos cargado nuestro componente de manera asíncrona. Si echas un vistazo a la pestaña de red de tus devtools, verás un archivo llamado 0.js que contiene tu componente asíncrono.

 Paquete web de división de código

Carga condicional de componentes de Async

Ahora que tenemos un control de los componentes asíncronos, cosechemos su poder de verdad cargándolos solo cuando sean realmente necesarios. En la sección anterior de este artículo, expliqué el caso de uso de una casilla de verificación que solo se carga cuando el usuario presiona el botón de verificación. Construyamos eso.

Configuración del proyecto

Si no tienes instalado Vue CLI, deberías tomarlo ahora:

 npm i -g @ vue / cli

A continuación, use la CLI para crear un nuevo proyecto, seleccionando el ajuste predeterminado cuando se le solicite:

 vue create my-store

Cambie al directorio del proyecto, luego instale la biblioteca ant-design-vue que usaremos para el estilo:

 cd my-store
npm i ant-design-vue

A continuación, importe la biblioteca de Ant Design en src / main.js :

 importe 'ant-design-vue / dist / antd.css'

Finalmente, cree dos nuevos componentes en src / comonents Checkout.vue y Items.vue :

 touch src / components / {Checkout.vue, Items .vue}

Creación de la vista de tienda

Abre src / App.vue y reemplaza el código allí con lo siguiente:


  

importa elementos de "./components /Artículos" por defecto de exportación   componentes: {     artículos   }   nombre: 'aplicación',   datos () {     regreso {       msg: 'Mi tienda de camisetas de lujo'     }   } } #app {   Familia tipográfica: 'Avenir', Helvética, Arial, sans-serif;   -webkit-font-smoothing: suavizado;   -moz-osx-font-smoothing: escala de grises;   text-align: center;   color: # 2c3e50;   margen superior: 60px; } h1, h2 {   fuente-peso: normal; } ul {   tipo de estilo de lista: ninguno;   relleno: 0; } li {   pantalla: bloque en línea;   margen: 0 10px; } una {   color: # 42b983; }

No hay nada especial aquí. Todo lo que estamos haciendo es mostrar un mensaje y mostrar un componente .

A continuación, abra src / components / Items.vue y agregue el siguiente código:


  
artículo (s)            Pagar
Compre $
import {Card, Col, Row, Button, Icon} de 'ant-design-vue'; por defecto de exportación   métodos: {     addItem (clave) {       si (! this.shoppingList.includes (clave)) {         this.shoppingList.push (clave);       }     }   }   componentes: {     Tarjeta, Col, Fila, Botón, Icono,     Checkout: () => import ('./ Checkout')   }   datos: () => ({     elementos: [ { msg: 'First Product', price: 9.99 }, { msg: 'Second Product', price: 19.99 }, { msg: 'Third Product', price: 15.00 }, { msg: 'Fancy Shirt', price: 137.00 }, { msg: 'More Fancy', price: 109.99 }, { msg: 'Extreme', price: 3.00 }, { msg: 'Super Shirt', price: 109.99 }, { msg: 'Epic Shirt', price: 3.00 }, ],     lista de compras: [],     espectáculo: falso   }) } #checkout {   color de fondo: # e55242;   color blanco;   margen izquierdo: 10px; }

En este archivo, estamos mostrando un ícono del carrito de compras con la cantidad actual de artículos comprados. Los propios elementos se extraen de una matriz de elementos declarada como una propiedad de datos. Si hace clic en el botón Comprar de un artículo, se llama el método addItem que empujará el artículo en cuestión a una matriz shoppingList . A su vez, esto incrementará el total del carro.

También hemos agregado un botón Checkout a la página, y aquí es donde las cosas empiezan a ponerse interesantes:

 Checkout 

Cuando un usuario hace clic en este botón, estamos configurando un parámetro para que sea verdadero . Este valor verdadero es muy importante para el propósito de cargar condicionalmente nuestro componente asíncrono.

Unas pocas líneas a continuación, puede encontrar una declaración v-if que solo muestra el contenido de

cuando show se establece en verdadero . Esta etiqueta

contiene el componente de pago, que solo queremos cargar cuando el usuario ha pulsado el botón de pago.

El componente de pago se carga de forma asíncrona en la opción componentes en la sección . Lo interesante aquí es que incluso podemos pasar argumentos al componente a través de la declaración v-bind . Como puede ver, es relativamente fácil crear componentes asíncronos condicionales:

  
  

Agreguemos rápidamente el código para el componente Checkout en src / components / Checkout.vue :


  
    

Artículo: por $     

importa {Tarjeta} de 'ant-design-vue'; por defecto de exportación   utilería: ['shoppingList'],   componentes: {     Tarjeta   }   datos: () => ({     Artículos: [ { msg: 'First Product', price: 9.99 }, { msg: 'Second Product', price: 19.99 }, { msg: 'Third Product', price: 15.00 }, { msg: 'Fancy Shirt', price: 137.00 }, { msg: 'More Fancy', price: 109.99 }, { msg: 'Extreme', price: 3.00 }, { msg: 'Super Shirt', price: 109.99 }, { msg: 'Epic Shirt', price: 3.00 }, ]   }) }

Aquí repasamos los accesorios que recibimos como shoppingList y los enviamos a la pantalla.

Puedes ejecutar la aplicación usando el comando npm run serve . Luego navegue a http: // localhost: 8080 / . Si todo ha ido según lo planeado, debería ver algo como lo que se muestra en la imagen a continuación.

 Vue Webshop Demo

Intente hacer clic en la tienda con la pestaña de red abierta para asegurarse de que El componente Checkout solo se carga al hacer clic en el botón Checkout .

También puede encontrar el código para esta demostración en GitHub .

Async con Componente de carga y error

Incluso es posible definir un componente de carga y / o error para cuando el componente asíncrono demora algún tiempo en cargarse o no se carga. Puede ser útil mostrar una animación de carga, pero tenga en cuenta que de nuevo esto ralentiza la aplicación. Un componente asíncrono debe ser pequeño y rápido de cargar. Aquí hay un ejemplo:

 const Message = () => ({
  componente: importar ("./ Mensaje"),
  cargando: LoadingAnimation,
  error: ErrorComponent
});

Conclusión

Crear e implementar componentes asíncronos es muy sencillo y debería formar parte de su rutina de desarrollo estándar. Desde una perspectiva de UX, es importante reducir el tiempo de carga inicial tanto como sea posible para mantener la atención del usuario. Esperemos que este tutorial lo haya ayudado a cargar sus propios componentes de forma asíncrona y a aplicarles condiciones para retrasar (carga lenta) la carga del componente.


READ MORE – CLICK HERE

www.Down.co.ve


from Down.co.ve http://bit.ly/2Ur0e3t
via www.Down.co.ve

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s