在webpack中使用Code Splitting--代碼分割來實現vue中的懶加載

當Vue應用程序愈來愈大，使用Webpack的代碼分割來懶加載組件，路由或者Vuex模塊, 只有在須要時候才加載代碼。

咱們能夠在Vue應用程序中在三個不一樣層級應用懶加載和代碼分割:

• 組件，也稱爲異步組件
• 路由
• Vuex 模塊

可是他們都有一些共同之處：自webpack2.0版本以後,他們都使用動態導入[譯者注：也能夠參考這個]。

Vue組件中的懶加載

這在Egghead上的"使用Vue異步組件按需加載組件"視頻中有很好的解釋。
這就像在註冊組件時使用import函數同樣簡單：

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

並在本地註冊使用:

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

經過包裝import函數進入到箭頭函數，Vue將會在它被請求的時候執行加載這個模塊。

若是組件導入使用命名導出[譯者注：模塊的導入導出，能夠參考阮老師的文章]，則能夠在返回的Promise上使用對象解構。
例如，對於來自KeenUI的UiAlert組件：

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

Vue路由中的懶加載

Vue路由器內置支持懶加載。這就像用import函數導入組件同樣簡單。看個例子，咱們想在 /login 路由中使用懶加載一個Login組件：

// Instead of: import Login from './login'
// 替換: import Login from './login'
const Login = () => import('./login')

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

懶加載Vuex模塊

Vuex有一種registerModule方法能夠讓咱們動態地建立Vuex模塊。若是咱們考慮到該import功能將ES模塊做爲有效載荷返回promise[原文： If we take into account that import function returns a promise with the ES Module as the payload]，咱們能夠使用它來懶加載模塊：

const store = new Vuex.Store()

...

// Assume there is a "login" module we wanna load
// 設想 咱們須要加載一個"login"模塊
import('./store/login').then(loginModule => {
  store.registerModule('login', loginModule)
})

結論

Vue和Webpack使用懶加載很是簡單。使用您剛剛閱讀的內容，您能夠從不一樣方面開始分割應用程序，並在須要時加載應用程序，從而減輕應用程序的初始加載。

ps: 這篇文章，基本上是翻譯過來的。感謝做者Alex Jover
原文連接：
Lazy Loading in Vue using Webpack's Code Splitting

其餘文章：
weiqinl
簡書