[Optimización del rendimiento] Cómo Vue implementa la carga diferida de rutas

Prefacio:

¿Por qué usar la carga diferida de rutas? Cuándo usar la carga diferida de rutas

Objetivo:

Para brindarles a los clientes una mejor experiencia, el primer componente de la pantalla se carga más rápido, reduce la cantidad de recursos solicitados y reduce la probabilidad de una pantalla blanca causada por una red deficiente.

definición:

Al compilar aplicaciones en paquetes, los paquetes de JavaScript pueden volverse muy grandes y afectar la carga de la página. Si podemos dividir los componentes correspondientes a diferentes rutas en diferentes bloques de código y luego cargar los componentes correspondientes cuando se accede a la ruta, será más eficiente.

Ejemplo de actualización (carga diferida no implementada)

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld'
export default new Router({
    routes: [
        {
            path: '/Foo',
            name: 'Foo',
            component: HelloWorld 
        }
    ]
})

Método para realizar

1. Componentes asíncronos de Vue

import Vue from 'vue';
import Router from 'vue-router';
export default new Router({
    routes: [
        {
            path: '/HelloWorld',
            name: 'HelloWorld',
            component: resolve => require(['../pages/HelloWorld/index'], resolve)
        }
    ]
})

2. Importación () de ES6

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld= () => import('../components/HelloWorld')
export default new Router({
    routes: [
        {
            path: '/HelloWorld',
            name: 'HelloWorld',
            component: HelloWorld
        }
})

3. Importar extensión --> usar webpack para agrupar componentes en bloques

import Vue from 'vue';
import Router from 'vue-router';
// 官网可知：下面没有指定webpackChunkName，每个组件打包成一个js文件。
// const HelloWorld= () => import('../components/HelloWorld')
// const Foo = () => import('../components/Foo')

// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
const HelloWorld= () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/HelloWorld')
const Foo= () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
export default new Router({
    routes: [
        {
            path: '/HelloWorld',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/Foo',
            name: 'Foo',
            component: Foo
        }
    ]
})

Resumen: dos métodos de carga diferida de uso común para el enrutamiento

1. El componente asíncrono de Vue realiza la carga diferida de la ruta

　　componente: resolve=>(['la dirección de la ruta que debe cargarse', resolve])

2. La importación propuesta por es (se recomienda este método)

　　const HelloWorld = () =>import('La dirección del módulo que debe cargarse')

        Si aún desea agrupar componentes en fragmentos, agregue webpackChunkName para importar

  referencias:

"Carga diferida de enrutamiento de Vue-router"