使用webpack的代碼分離"Code Splitting"實現vue應用的懶加載

原文鏈接：https://alexjover.com/blog/lazy-load-in-vue-using-webpack-s-code-splitting/

在vue應用中，我們可以在三個層次上使用懶加載和代碼分離技術：

• 組件，通常是我們熟知的異步組件
• 路由
• Vuex模塊

他們都有一個共性：他們使用了動態引入（webpack2.0以上支持）。

# Vue組件中的懶加載

這個在 Egghead（國外博文網站）的文章 “Vue異步組件中按需加載組件” 已經有了很好的說明。

使用起來也很簡單，註冊組件時使用import方法即可：

Vue.component("AsyncCmp", () => import("./AsyncCmp"));

And using local registration:

或者使用局部註冊：

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

通過將import函數包裝成箭頭函數，Vue將僅在收到請求時執行它，並在此時加載該模塊。

假如組件導入時要使用已命名的導出，你可以在返回的Promise函數裏面使用對象解構。例如，在KeenUI中使用UiAlert組件：

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

# Vue router中懶加載

Vue router 支持 懶加載 。使用起來也很簡單，在引入組件的時候使用import方法。比如我們想在/login路由中懶加載登錄組件：

// Instead of: import Login from './login'
const Login = () => import("./login");

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

# Vuex模塊懶加載

Vuex中的registerModule 方法允許我們動態創建Vuex模塊。如果我們的import方法返回的是一個以ES模塊爲載荷的Promise，那我們就可以使用它來懶加載這個模塊：

const store = new Vuex.Store()

...

// Assume there is a "login" module we wanna load
import('./store/login').then(loginModule => {
  store.registerModule('login', loginModule)
})

# 總結

在Vue和Webpack中使用懶加載已經變得非常簡單。運用以上內容，你就可以對你的app從這幾個不同的方面進行分塊並按需加載，從而減輕app的初始加載。

 

原英文鏈接：https://alexjover.com/blog/lazy-load-in-vue-using-webpack-s-code-splitting/