使用Webpack的代碼分離實現Vue懶加載（譯文）

當一個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的 UiAlert組件的例子：

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