Vue按需加载

vue项目实现按需加载的3种方式：vue异步组件技术、es提案的import()、webpack提供的require.ensure()

异步组件

异步组件就是定义的时候什么都不做，只在组件需要渲染（组件第一次显示）的时候进行加载渲染并缓存

const router = new Router({
  routes: [
   {
     path: '/list',
     component: (resolve) => {
        // 这里是你的模块 不用import去引入了
        require(['@/components/list'], resolve)
     }
    }
  ]
})

es的import()

const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')
export default new Router({
   routes: [
       {
           path: '/importfuncdemo1',
           name: 'ImportFuncDemo1',
           component: ImportFuncDemo1
       },
       {
           path: '/importfuncdemo2',
           name: 'ImportFuncDemo2',
           component: ImportFuncDemo2
       }
   ]
})

webpack提供的require.ensure()

此方法内部依赖于Promise

const List = resolve => require.ensure([], () => resolve(require('@/components/list')), 'list');
// 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 
const router = new Router({
  routes: [
  {
    path: '/list',
    component: List,
    name: 'list'
  }
 ]
}))

• 参数1：是字符串数组，模块的依赖，会提前加载。一般都是空的。
• 参数2：依赖项加载完成之后的回调函数
  所有的依赖加载完成之后，webpack会执行这个回调函数，require对象的一个实现会作为一个参数传递给回调函数，因此，可以require依赖和其他模块提供下一步的执行。
• 参数3：chunk名称
  多个路由指定相同的chunkName，会合并打包成一个js文件