看到這個題目襟铭，首先要了解為什么要路由懶加載，懶加載又解決了什么問題翁都？
為什么
當(dāng)不使用賴加載時碍论，webpack會將所有路由組件，合并打成一個js文件柄慰，使得該js文件的體積比較龐大鳍悠，在首屏渲染時，瀏覽器解析的時間增加坐搔，進(jìn)而導(dǎo)致首屏完成渲染的時間增長藏研。使用賴加載可以將路由組件打包成多個js文件，當(dāng)你需要哪些組件時概行，就加載哪些遥倦。首屏渲染時，只會加載首屏依賴的js文件占锯，自然瀏覽器解析時間會縮短。
就比如人要每天吃三餐缩筛，每餐都是獨立的消略，不使用賴加載就類似于在早餐的時候，你非要將三餐全部做好后再食用早餐瞎抛，等待的時間就(已餓暈..)...
如何實現(xiàn)路由懶加載
- vue的異步組件
- ES6動態(tài)導(dǎo)入import()
- webpack提供的require.ensure(已被import()替代)
vue的異步組件
export default new Router({
routes: [
{
path: '/xxx',
name: 'xxx',
// 每一個異步組件會單獨生成一個js文件
component: resolve => require(['路徑'], resolve)
}
]
})
ES6動態(tài)導(dǎo)入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執(zhí)行的回調(diào)
callback: function(require),
// webpack加載失敗時執(zhí)行的回調(diào)
errorCallback: function(error),
// 創(chuàng)建的chunk的名稱，同名的會合并生成一個chunk
chunkName: String
)
export default new Router({
routes: [
{
path: '/xxx',
name: 'xxx',
component: resolve => require.ensure([], (require) => resolve(require('路徑'), error => {}, 'chunkName')
},
]
})
