¿Por qué deberíamos usar componentes asíncronos en Vue.js?

Ya dimos un paso más, estamos utilizando Vue como nuestro framework  de javascript y webpack como nuestro empaquetador de módulos, empezamos a añadir muchas características a nuestras SPA realizado con Vue.js, pero a medida que crece más nuestra aplicación web, nuestro único bundle pesa más, esto por supuesto genera más tiempo de carga al usuario que estará visualizando la página, además de que aumenta el tiempo con que nuestro navegador interpretará nuestro código.

Con los componentes asíncronos de Vue.js y la ayuda de webpack podemos solucionar este problema de rendimiento y así optimizar la carga de nuestro sitio web. Lo que haremos será decirle a webpack que  tome el código de nuestro componente, lo ponga en otro archivo js y lo cargue de manera que cuando el usuario visite la sección donde se encuentre ese código, se cargue de manera asíncrona.

En la siguiente salida veremos como webpack normalmente crea nuestro bundle, todos los módulos que hemos escrito en javascript los unifica en un solo archivo js. En mi caso tengo una pequeña SPA por lo que el archivo unificado al final no pesa tanto, pero para SPA más complejas esto sería caótico.

Con webpack y los componentes asíncronos hemos logrado aligerar un poco la carga de nuestro archivo js , no hemos reducido mucho el peso en mi caso, faltarían más técnicas, como colocar las dependencias en común en un solo archivo vendor.js.

Ahora dejémonos de palabrería y vamos al código.Normalmente solemos importar un módulo de la siguiente manera y usarlo en Vue como un componente en todas las instancias.

Cambiaremos nuestra sintaxis anterior por la siguiente ya que con la ayuda de webpack y las arrow functions de ES6 le diremos a webpack que separe el código de nuestro componente a otro archivo js, por lo que quedaría así.

Si tenemos muchos componentes, sería un poco repetitivo estar escribiendo uno y otra vez lo mismo, por lo que podemos reducirlo de la siguiente manera.

Si no quieres registrar un componente global, también puedes registrarlo de manera local en tu instancia Vue. Recuerda que al registrar el componente de esta manera, el mismo estará disponible sólo en el ámbito de esa instancia.

Vue Router

Vue Router es la librería oficial de rutas para Vue, por lo que también nos permite el uso de los componentes asíncronos para reducir la carga de nuestra app.

En la documentación de Vue podemos conseguir más información sobre los componentes asíncronos y para los que se les dé mal el inglés podemos conseguir la documentación en español dando click aquí

 

Comparte este artículo

Entra en la discusión y deja tu comentario

  • degt

    Buen post! 👍

Veces