Vue代碼分割懶加載

webpack > 2的時代，vue作代碼分割懶加載更加的easy，不須要loader，不須要require.ensure。
import解決一切。

分割層級

Vue代碼分割懶加載包含以下幾個層級:

一、 組件層級分割懶加載
二、 router路由層級
三、 Vuex 模塊

組件層級代碼分割

//全局組件
Vue.component('AsyncComponent', () => import('./AsyncComponent'))

//局部註冊組件
new Vue({
  // ...
  components: {
    'AsyncComponent': () => import('./AsyncComponent')
  }
})

// 若是不是default導出的模塊
new Vue({
  // ...
  components: {
    'AsyncComponent': () => import('./AsyncComponent').then({ AsyncComponent }) => AsyncComponent
  }
})

路由層級代碼分割

const AsyncComponent= () => import('./AsyncComponent')

new VueRouter({
  routes: [
    { path: '/test', component: AsyncComponent}
  ]
})

Vuex 模塊代碼分割,vuex中有動態註冊模塊方法，同時也是加上import

const store = new Vuex.Store()

import('./store/test').then(testModule => {
  store.registerModule('test', testModule)
})

總結

在通常項目中，咱們按照router和components層面分割（或者只使用router分割）就足夠了。大型項目可能三者都會用到，但用法都很簡單，不是麼？