如何使用Webpack的代碼分離實(shí)現(xiàn)Vue的加載

當(dāng)一個(gè)Vue的項(xiàng)目體積變得十分龐大的時(shí)候，使用Webpack的代碼分離功能將Vue Components，routes或Vuex的代碼進(jìn)行分離并按需加載，會(huì)極大的提高App的首屏加載速度。

在Vue的項(xiàng)目中，我們可以在三種不同的情況下使用懶加載和代碼分離功能：

三者的共同點(diǎn)都是使用的動(dòng)態(tài)import，這在Webpack的第二個(gè)版本就開(kāi)始被支持。

在Vue組件中進(jìn)行懶加載

在Eggheads中有關(guān)于使用Vue異步組件實(shí)現(xiàn)按需加載組件的解釋。

實(shí)現(xiàn)異步組件只需要使用import函數(shù)去注冊(cè)組件即可：

Vue.component('AsyncCmp', () => import('./AsyncCmp'))

也可以使用本地注冊(cè)組件的方式：

new Vue({
 // ...
 components: {
 'AsyncCmp': () => import('./AsyncCmp')
 }
})

使用箭頭函數(shù)指向import函數(shù)，Vue將會(huì)在需要該組件的時(shí)候才執(zhí)行請(qǐng)求加載該組件的代碼。

如果導(dǎo)入的組件是使用命名的方式進(jìn)行導(dǎo)出的，你可以在Promise的返回值中使用對(duì)象解構(gòu)的方式實(shí)現(xiàn)按需加載組件。下面是加載KeenUI的 UiAlert組件的例子：

components: {
 UiAlert: () => import('keen-ui').then(({ UiAlert }) => UiAlert)
}

在Vue router中進(jìn)行懶加載

Vue router在原生支持懶加載。和懶加載組件的方式一樣，都是使用import函數(shù)。例如我們想在/login這個(gè)路由下懶加載Login組件。

// 不再使用 import Login from './login'
const Login = () => import('./login')

new VueRouter({
 routes: [
 { path: '/login', component: Login }
 ]
})

在Vuex中進(jìn)行懶加載

Vuex的registerModule方法允許我們動(dòng)態(tài)的創(chuàng)建Vuex的模塊。如果我們使用import函數(shù)在Promise中返回模塊作為載荷（payload），就實(shí)現(xiàn)了懶加載。

const store = new Vuex.Store()

...

// 假設(shè)我們想加載'login'這個(gè)模塊
import('./store/login').then(loginModule => {
 store.registerModule('login', loginModule)
})

總結(jié)

在Vue + Webpack中是懶加載十分簡(jiǎn)單。趕快使用上面學(xué)習(xí)到的方法將你的Vue項(xiàng)目進(jìn)行代碼分離并在它們需要的時(shí)候進(jìn)行按需加載，這樣可以顯著減少應(yīng)用首屏加載的時(shí)間。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com