I. Introducción
Cuando se crea una aplicación por empaquetado, el paquete de JavaScript se vuelve muy grande, lo que afecta la carga de la página. Como se muestra en la figura, si no se usa la carga diferida, nuestro código comercial está en el archivo js al comienzo de la aplicación. A medida que aumenta el negocio, la cantidad de código aumenta y el archivo js se hace cada vez más grande El usuario visita la página por primera vez Puede haber una breve pantalla en blanco.
El papel de los tres archivos js:
- Archivo .js al comienzo de la aplicación : código comercial escrito por usted mismo
- El archivo .js al comienzo del manifiesto : proporciona el soporte subyacente para el código empaquetado. Por ejemplo, usamos las reglas de exportación ES6 o CommonJS en el proyecto, y este archivo js puede procesar estas reglas.
- Archivos .js que comienzan con el proveedor : código js de terceros, como vue, código de enrutador vue
- El archivo index.html introduce el archivo .js al comienzo de la aplicación.
Dos, utilice la carga diferida de enrutamiento
Si podemos dividir los componentes correspondientes a diferentes rutas en diferentes bloques de código, y luego cargar los componentes correspondientes cuando se acceda a las rutas , será más eficiente. La función principal del enrutamiento de carga diferida es empaquetar los componentes correspondientes al enrutamiento en bloques de código js . Enrutamiento de carga diferida | sitio web oficial de Vue Router
Método de carga diferida:
const Foo = () => import('./Foo.vue')
const router = new VueRouter({
routes: [
{
path: '/foo', component: Foo }
]
})
