使用Webpack的程式碼分離實現Vue懶載入(譯文)
阿新 • • 發佈:2018-12-20
當一個Vue的專案體積變得十分龐大的時候,使用Webpack的程式碼分離功能將Vue Components
,routes
或Vuex
的程式碼進行分離並按需載入,會極大的提高App的首屏載入速度。
在Vue的專案中,我們可以在三種不同的情況下使用懶載入和程式碼分離功能:
- Vue元件,也稱為非同步元件
- Vue-Router
- Vuex
三者的共同點都是使用的動態import,這在Webpack的第二個版本就開始被支援。
在Vue元件中進行懶載入
在Eggheads中有關於使用Vue非同步元件實現按需載入元件的解釋。
實現非同步元件只需要使用import
Vue.component('AsyncCmp', () => import('./AsyncCmp'))
也可以使用本地註冊元件的方式:
new Vue({
// ...
components: {
'AsyncCmp': () => import('./AsyncCmp')
}
})
使用箭頭函式指向import
函式,Vue
將會在需要該元件的時候才執行請求載入該元件的程式碼。
如果匯入的元件是使用命名的方式進行匯出的,你可以在Promise
的返回值中使用物件解構的方式實現按需載入元件。下面是載入KeenUI
components: {
UiAlert: () => import('keen-ui').then(({ UiAlert }) => UiAlert)
}
在Vue router中進行懶載入
Vue router在原生支援懶載入。和懶載入元件的方式一樣,都是使用import
函式。例如我們想在/login
這個路由下懶載入Login
元件。
// 不再使用 import Login from './login' const Login = () => import('./login') new VueRouter({ routes: [ { path: '/login', component: Login } ] })
在Vuex中進行懶載入
Vuex的registerModule
方法允許我們動態的建立Vuex的模組。如果我們使用import
函式在Promise
中返回模組作為載荷(payload),就實現了懶載入。
const store = new Vuex.Store()
...
// 假設我們想載入'login'這個模組
import('./store/login').then(loginModule => {
store.registerModule('login', loginModule)
})
總結
在Vue + Webpack中是懶載入十分簡單。趕快使用上面學習到的方法將你的Vue專案進行程式碼分離並在它們需要的時候進行按需載入,這樣可以顯著減少應用首屏載入的時間。
原文連結: Lazy Loading in Vue using Webpack's Code Splitting