在很多項(xiàng)目中浩村，我們都會(huì)看到這樣的代碼
routes: [
{
// 進(jìn)行路由配置,規(guī)定'/'引入到home組件
path: '/',
component: resolve => require(['../pages/home.vue'], resolve),
meta: {
title: 'home'
}
},
{
path: '/msg',
component: Msg
},
{
path: '/detail',
component: Detail,
children: [
{
path: 'msg',
component: Msg
}
]
}
]
在構(gòu)建路由配置的時(shí)候，沒有采用傳統(tǒng)的做法那樣 import 組件护蝶，而是在單個(gè)路由設(shè)置時(shí)华烟，使用 require 導(dǎo)入組件。
component: resolve => require(['../pages/home'], resolve)
原因很簡(jiǎn)單持灰，像使用 vue.js 這樣實(shí)現(xiàn)的單頁(yè)面應(yīng)用盔夜，如果使用 import 引入組件不使用懶加載的話，當(dāng)項(xiàng)目打包時(shí)路由里的所有 component 都會(huì)打包在一個(gè) js 中堤魁，導(dǎo)致打包文件過大喂链。從而造成進(jìn)入首頁(yè)時(shí)，需要加載的內(nèi)容過多妥泉，時(shí)間相對(duì)比較長(zhǎng)椭微。
當(dāng)使用 resolve 懶加載方式則可以將頁(yè)面進(jìn)行劃分，webpack 打包時(shí)會(huì)將 component 分別打包成不同的js盲链。只有訪問這個(gè)路由網(wǎng)址時(shí)才會(huì)加載這個(gè)js蝇率。
具體的可以在打包的時(shí)候迟杂，看看目錄結(jié)構(gòu)就明了了。
