路由懒加载

作用：提高首屏加载速度，解决白屏问题，提高用户体验。

定义：懒加载即按需加载，在需要的时候才会加载。

方式：

1.vue异步组件

2.es6的import()

3.webpack的require.ensure()

 

1.vue异步组件

特点：一个组件会生成一个js文件

{
    path:'/home',
    name:'Home',
    component:resolve=>require([url],resolve)
}

2.import()

特点：指定了相同的webpackChunkName的，会合并打包成一个js文件，把组件按组分块。

若是不指定webpackChunkName，则每个组件打包成一个js。

{
    path:'/home',
    name:'Home',
    component:()=>import(/*webpackChunkName:'home'*/ url)
},
{
    path:'/details',
    name:'Details',
    component:()=>import(/*webpackChunkName:'home'*/ url)
}

3.require.ensure()

特点：多个路由指定相同的chunkName，会合并打包成一个js文件

{
    path:'/home',
    name:'Home',
    component:r=>require.ensure([],()=>r(require(url),home))
},
{
    path:'/details',
    name:'Details',
    component:r=>require.ensure([],()=>r(require(url),home))
},