路由懒加载

看到这个题目，首先要了解为什么要路由懒加载，懒加载又解决了什么问题？
为什么
当不使用赖加载时，webpack会将所有路由组件，合并打成一个js文件，使得该js文件的体积比较庞大，在首屏渲染时，浏览器解析的时间增加，进而导致首屏完成渲染的时间增长。使用赖加载可以将路由组件打包成多个js文件，当你需要哪些组件时，就加载哪些。首屏渲染时，只会加载首屏依赖的js文件，自然浏览器解析时间会缩短。
就比如人要每天吃三餐，每餐都是独立的，不使用赖加载就类似于在早餐的时候，你非要将三餐全部做好后再食用早餐，等待的时间就(已饿晕..)...

如何实现路由懒加载

• vue的异步组件
• ES6动态导入import()
• webpack提供的require.ensure(已被import()替代)

vue的异步组件

export default new Router({
  routes: [
    {
      path: '/xxx',
      name: 'xxx',
      // 每一个异步组件会单独生成一个js文件
      component: resolve => require(['路径'], resolve)
    }
  ]
})

ES6动态导入import()

export default new Router({
  routes: [
    {
      path: '/xxx',
      name: 'xxx',
      // webpackChunkName chunk名称 同名会合并打包成一个js文件
      component: () => import(/* webpackChunkName: 'name' */ '路径')
    },
    {
      path: '/yyy',
      name: 'yyy',
      // webpackChunkName chunk名称
      component: () => import(/* webpackChunkName: 'name' */ '路径')
    },
  ]
})

webpack提供的[require.ensure]

require.ensure(
  // callback依赖的模块
  dependencies: String[],
  // 依赖加载完成后，webpack执行的回调
  callback: function(require),
  // webpack加载失败时执行的回调
  errorCallback: function(error),
  // 创建的chunk的名称，同名的会合并生成一个chunk
  chunkName: String
)

export default new Router({
  routes: [
    {
      path: '/xxx',
      name: 'xxx',
      component: resolve => require.ensure([], (require) => resolve(require('路径'), error => {}, 'chunkName')  
    },
  ]
})