【性能优化】Vue如何实现路由懒加载

前言：

为什么要使用路由懒加载。什么情况下使用路由懒加载

目的：

为给客户更好的客户体验，首屏组件加载速度更快，减少请求资源数量，降低网络差导致出现白屏的概率。

定义：

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

改造例子(未实现懒加载）

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 
        }
    ]
})

实现方式

1.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.ES6的import()

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.import扩展-->使用webpack把组件按组分块

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
        }
    ]
})

总结：路由常用两种懒加载方式

1.vue异步组件实现路由懒加载

　　component：resolve=>(['需要加载的路由的地址'，resolve])

2.es提出的import(推荐使用这种方式)

　　const HelloWorld = （）=>import('需要加载的模块地址')

        如果还想把组件按组分块，在import中增加webpackChunkName

  参考文献：

《Vue-router路由懒加载》