vue異步組件

路由懶加載

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

結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕松實現路由組件的懶加載。如：

const Foo = () => import('./Foo.vue')

　　

異步組件

在大型應用中，我們可能需要將應用分割成小一些的代碼塊，並且只在需要的時候才從服務器加載一個模塊。為了簡化，Vue 允許你以一個工廠函數的方式定義你的組件，這個工廠函數會異步解析你的組件定義。Vue 只有在這個組件需要被渲染的時候才會觸發該工廠函數，且會把結果緩存起來供未來重渲染。例如：

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回調傳遞組件定義
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

　　如你所見，這個工廠函數會收到一個 resolve 回調，這個回調函數會在你從服務器得到組件定義的時候被調用。你也可以調用 reject(reason) 來表示加載失敗。這里的 setTimeout 是為了演示用的，如何獲取組件取決於你自己。一個推薦的做法是將異步組件和 webpack 的 code-splitting 功能一起配合使用：

ue.component('async-webpack-example', function (resolve) {
  // 這個特殊的 `require` 語法將會告訴 webpack
  // 自動將你的構建代碼切割成多個包，這些包
  // 會通過 Ajax 請求加載
  require(['./my-async-component'], resolve)
})

　　你也可以在工廠函數中返回一個 Promise，所以把 webpack 2 和 ES2015 語法加在一起，我們可以寫成這樣：

Vue.component(
  'async-webpack-example',
  // 這個 `import` 函數會返回一個 `Promise` 對象。
  () => import('./my-async-component')
)

　　當使用局部注冊的時候，你也可以直接提供一個返回 Promise 的函數：

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})