看到这个题目，首先要了解为什么要路由懒加载，懒加载又解决了什么问题？
为什么
当不使用赖加载时，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')
},
]
})
