使用Webpack的代碼分離實(shí)現(xiàn)Vue懶加載
當(dāng)一個(gè)Vue的項(xiàng)目體積變得十分龐大的時(shí)候作媚，使用Webpack的代碼分離功能將Vue Components，routes或Vuex的代碼進(jìn)行分離并按需加載，會(huì)極大的提高App的首屏加載速度。
在Vue的項(xiàng)目中，我們可以在三種不同的情況下使用懶加載和代碼分離功能：
- Vue組件畜挨，也稱為異步組件
- Vue-Router
- Vuex
三者的共同點(diǎn)都是使用的動(dòng)態(tài)import筒繁，這在Webpack的第二個(gè)版本就開始被支持。
在Vue組件中進(jìn)行懶加載
在Eggheads中有關(guān)于使用Vue異步組件實(shí)現(xiàn)按需加載組件的解釋巴元。
實(shí)現(xiàn)異步組件只需要使用import函數(shù)去注冊組件即可：
Vue.component('AsyncCmp', () => import('./AsyncCmp'))
也可以使用本地注冊組件的方式：
new Vue({
// ...
components: {
'AsyncCmp': () => import('./AsyncCmp')
}
})
使用箭頭函數(shù)指向import函數(shù)毡咏，Vue將會(huì)在需要該組件的時(shí)候才執(zhí)行請求加載該組件的代碼。
如果導(dǎo)入的組件是使用命名的方式進(jìn)行導(dǎo)出的逮刨，你可以在Promise的返回值中使用對象解構(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)
})
