19.路由懒加载的3种方法

原因：若没有使用路由懒加载，在webpack打包后，打包后的文件会非常大，影响首页加载速度，可能会出现白页。

而运用路由懒加载，当路由被访问的时候才加载对应组件，达到了按需加载，减少了首页的加载时间。

 

方式一：import按需加载（常用）

export default new Router({
    routes: [
    {
        path: '/',
        name: 'HelloWorld',
        component: () => import('@/components/HelloWorld.vue')
    }
]

 

方式二：vue异步组件

export default new Router({
    routes: [
    {
        path: '/',
        name: 'HelloWorld',
        component: resolve => require(['@/components/HelloWorld'], resolve)
    }
]

 

方式三：webpack提供的require.ensure()

export default new Router({
    routes: [
    {
        path: '/',
        name: 'HelloWorld',
        component: resolve => require.ensure([], () => resolve(require('@/components/HelloWorld')), 'listDemo')
    }
]