當打包構建應用時，Javascript 包會變得非常大，影響頁面載入。如果我們能把不同路由對應的元件分割成不同的程式碼塊，然後當路由被訪問的時候才載入對應元件，這樣就更加高效了。

結合 Vue 的 非同步元件 和 Webpack 的 code splitting feature, 輕鬆實現路由元件的懶載入。

我們要做的就是把路由對應的元件定義成非同步元件

const Foo = resolve => {
  // require.ensure 是 Webpack 的特殊語法，用來設定 code-split point
  // （程式碼分塊）
  require.ensure(['./Foo.vue'], () => {
    resolve(require(
 
'./Foo.vue'))
  })
}

這裡還有另一種程式碼分塊的語法，使用 AMD 風格的 require，於是就更簡單了：

const Foo = resolve => require(['./Foo.vue'], resolve) 

不需要改變任何路由配置，跟之前一樣使用 Foo：

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
}) 

把元件按組分塊

有時候我們想把某個路由下的所有元件都打包在同個非同步 chunk 中。只需要 給 chunk 命名，提供 require.ensure

const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')

Webpack 將相同 chunk 下的所有非同步模組打包到一個非同步塊裡面 —— 這也意味著我們無須明確列出 require.ensure

如果你想在元件載入的時候可以有loading提示也同樣的很簡單

這裡以mint-ui為例

import { Indicator } from 'mint-ui';
//前提是npm i mint-ui -S

然後你就只需要稍微加一點程式碼

const Foo = resolve => {
Indicator.open();
  require.ensure(['./Foo.vue'], () => {
    resolve(require('./Foo.vue'))
    Indicator.close()
  })
}
//這樣就可以實現元件在非同步載入的時候顯示loading

效果如下