使用vue開(kāi)發(fā)已經(jīng)有一段時(shí)間了粹懒，在后來(lái)的工作中今魔，做的一些項(xiàng)目越來(lái)越大勺像。vue打包后的js文件也越來(lái)越大，這會(huì)是影響加載時(shí)間的重要因素错森。當(dāng)構(gòu)建的項(xiàng)目比較大的時(shí)候吟宦，懶加載可以分割代碼塊，提高頁(yè)面的初始加載效率涩维。這里我匯總了常見(jiàn)的幾種vue中路由懶加載的方法殃姓。
方法一 resolve
這一種方法較常見(jiàn)。它主要是使用了resolve的異步機(jī)制瓦阐，用require代替了import,實(shí)現(xiàn)按需加載蜗侈，下面是代碼示例：
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
// {
// path: '/',
// name: 'HelloWorld',
// component: HelloWorld
// }
{
path: '/',
name: 'HelloWorld',
component: resolve => require(['@/components/HelloWorld'], resolve)
}
]
})
方法二 官網(wǎng)方法
vue-router在官網(wǎng)提供了一種方法，可以理解也是為通過(guò)Promise的resolve機(jī)制睡蟋。因?yàn)?code>Promise函數(shù)返回的Promise為resolve組件本身踏幻，而我們又可以使用import來(lái)導(dǎo)入組件。整合起來(lái)代碼示例如下：
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
// {
// path: '/',
// name: 'HelloWorld',
// component: HelloWorld
// }
{
path: '/',
name: 'HelloWorld',
component: () => import('@/components/HelloWorld.vue')
}
]
})
官網(wǎng)中還提供了通過(guò)注釋語(yǔ)法來(lái)提供chunk name的方法戳杀，但是webpack的版本要高于2.4的版本该面。感興趣的可以到官網(wǎng)了解一下夭苗。
方法三 require.ensure
這種模式可以通過(guò)參數(shù)中的webpackChunkName將js分開(kāi)打包。
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
// {
// path: '/',
// name: 'HelloWorld',
// component: HelloWorld
// }
{
path: '/',
name: 'HelloWorld',
component: resolve => require.ensure([], () => resolve(require('@/components/'+componentName)), 'webpackChunkName')
}
]
})
在我之前的測(cè)試中隔缀，路由懶加載和自動(dòng)化注冊(cè)沒(méi)辦法同時(shí)使用题造，后期會(huì)嘗試找一下同時(shí)滿足兩種需求的方法，目前在考慮
Nuxt.js猾瘸。如果使用了js分割打包的方法可能會(huì)有資源訪問(wèn)不到的情況晌梨，可以參考我之前寫過(guò)的一篇文章vue 之 config配置文件詳情
