En Vue, si un componente es muy grande (como alguna forma compleja), ralentizará el rendimiento de toda la aplicación. Por lo tanto, al desarrollar aplicaciones Vue, debemos considerar cómo cargar componentes bajo demanda para mejorar el rendimiento de la aplicación.
Vue proporciona la funcionalidad de componentes asincrónicos, lo que nos permite dividir componentes en partes pequeñas y cargarlas dinámicamente cuando sea necesario. El principio de funcionamiento de los componentes asincrónicos es: antes de renderizar el componente, primero empaquete el código requerido por el componente en un bloque pequeño y luego cargue dinámicamente el bloque pequeño cuando sea necesario utilizar el componente.
1. Definición de componentes asincrónicos.
En Vue.js, si desea definir un componente asincrónico, debe utilizar el método webpackproporcionado . Los métodos nos permiten cargar código dinámicamente en tiempo de ejecución. La siguiente es una definición básica de componente asincrónico:import()import()
Vue.component('MyComponent', () => import('./MyComponent.vue'));Nota: La definición de un componente asincrónico debe ser una función que devuelva un Promiseobjeto.
2. Uso de componentes asincrónicos
Cuando utilice componentes asincrónicos, solo necesita escribirlos como componentes normales. Cuando se procesa el componente, Vue.js detectará automáticamente que el componente es un componente asincrónico y lo cargará dinámicamente. El siguiente es un uso básico de componentes asincrónicos:
<template>
<div>
<MyComponent />
</div>
</template>
<script>
export default {
components: {
MyComponent: () => import('./MyComponent.vue')
}
}
</script>3. Bloqueo
Si una aplicación contiene varios componentes asincrónicos, podemos empaquetarlos en diferentes partes pequeñas para mejorar el rendimiento de la aplicación. En Webpack, a través de webpackChunkNameanotaciones, se puede dar un nombre a los módulos asíncronos para que se empaqueten en un solo archivo. Por ejemplo:
Vue.component('MyComponent', () => import(/* webpackChunkName: "my-component" */ './MyComponent.vue'));4. Pantalla esqueleto
Para algunos componentes relativamente grandes, incluso si se utilizan componentes asincrónicos para la carga bajo demanda, todavía habrá un período en blanco cuando se carguen los componentes, lo que traerá una mala experiencia a los usuarios.
En este momento, la tecnología de pantalla esquelética se puede utilizar para representar un marcador de posición por adelantado para informar al usuario que se está cargando el contenido que se va a cargar. El siguiente es un uso básico de la pantalla esqueleto:
<template>
<div>
<template v-if="isLoading">
<!-- 骨架屏代码 -->
</template>
<template v-else>
<!-- 实际内容代码 -->
</template>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: true
}
},
mounted() {
import('./MyComponent.vue').then(() => {
this.isLoading = false
})
}
}
</script>En el código de muestra anterior, cuando es isLoadingverdadero, se muestra el código de la pantalla esqueleto; cuando es isLoadingfalso, se muestra el código del contenido real.
5. El principio de carga bajo demanda.
En Webpack, la carga bajo demanda de componentes asincrónicos se basa en los métodos y funciones import()proporcionados por Webpack . Code SplittingCuando un componente se define como un componente asincrónico, Webpack empaquetará el componente por separado en un archivo y utilizará el import()método para cargarlo dinámicamente en tiempo de ejecución. Dado que el componente empaquetado por webpack es un archivo modular JavaScript, también se puede optimizar en detalle, como adoptar el mecanismo de vibración del árbol y usar CDN para acelerar, etc.
Resumir
Los componentes asíncronos de Vue son un medio muy útil para optimizar el rendimiento, especialmente para aplicaciones grandes de una sola página (SPA). Al configurar componentes asincrónicos y pantallas esqueleto en Webpack, podemos mejorar significativamente el rendimiento y la experiencia del usuario de la aplicación.