Utilice defineAsyncComponent para cargar componentes de forma diferida en Vue3

Al utilizar la función defineAsyncComponent de Vue3, podemos cargar componentes de forma diferida. Esto significa que los componentes sólo se cargarán desde el servidor cuando sea necesario.

Esta es una excelente manera de mejorar la carga inicial de la página porque nuestra aplicación se cargará en partes más pequeñas en lugar de cargar cada componente a medida que se carga la página.

El siguiente ejemplo es del sitio web oficial de componentes asincrónicos:

También podemos usar la función de importación para agregar fácilmente componentes de Vue desde otros archivos.

Esta es la forma más sencilla de utilizar defineAsyncComponent, pero también podemos pasar un objeto de opciones completo configurado con varios parámetros más avanzados.

El valor predeterminado suele ser suficiente.

Solo necesitamos simular el componente ArticleList.vue para solicitar datos del artículo:

Usamos defineAsyncComponent para cargar el componente de forma diferida y usamos el elemento Suspense para envolver el componente:

De forma predeterminada, todos los componentes que utilizamos son suspendibles.

Esto significa que si un componente tiene un Suspense en su cadena principal, será tratado como una dependencia asincrónica de ese Suspense. Suspense ignora y maneja nuestras opciones de carga de componentes, errores, retrasos y tiempos de espera.

El resultado final es el siguiente:

El usuario verá Cargando..., 1 segundo después de completar la solicitud, y 1 segundo después de solicitar los datos, el archivo completo. Se muestra el componente.

defineAsyncComponent es útil al crear proyectos grandes con docenas de componentes. Cuando utilizamos componentes de carga diferida, podemos acelerar los tiempos de carga de la página, mejorar la experiencia del usuario y, en última instancia, aumentar la retención de aplicaciones y las tasas de conversión.