Vue程式碼分割懶載入

NsNe發表於2017-11-16
Vue

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

分割層級

Vue程式碼分割懶載入包含如下幾個層級:

1、 元件層級分割懶載入
2、 router路由層級
3、 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分割）就足夠了。大型專案可能三者都會用到，但用法都很簡單，不是麼？

相關文章