VUE如何實現按需載入？

參考：vue專案實現按需載入的3種方式：vue非同步元件、es提案的import()、webpack的require.ensure()

1、 vue非同步元件技術

通過vue-router配置路由，使用vue的非同步元件技術，實現按需載入，但是這種情況下，一個元件會生成一個js檔案。

{
        path: '/promisedemo',
        name:'PromiseDemo',
        component: resolve => require(['../components/PromiseDemo'], reslove)
    }

1. 非同步元件：在vue中以工廠函式的方式定義元件，這個工廠函式會非同步解析元件定義，Vue只有在這個元件需要被渲染的時候才會觸發該工廠函式，且會把結果快取起來供未來渲染

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

這個工廠函式會收到一個resolve回撥，這個回撥函式會在你從伺服器得到元件定義時被呼叫。也可將非同步元件和webpack的code-splitting功能一起配合使用：

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

2. **程式碼拆分（code-splitting）**是webpack最引人注目的功能之一, 此功能使您可以將程式碼分成多個捆綁，然後按需或並行載入：方法一：使用entry配置手動拆分程式碼；方法二：防止重複，使用SplitChunksPlugin ，將共同的依賴提取到一個現有的條目或一個全新的塊，類似的外掛還有mini-css-extract-plugin：將CSS從主應用程式中分離出來；方法三：動態匯入，使用import()語法進行動態匯入，或require.ensure

2、es提案的import()

需要webpack > 2.4

// 懶載入
// 下面2行程式碼，沒有指定webpackChunkName，每個元件打包成一個js檔案，若指定了webpackChunkName，則可將某個路由下的所有元件都打包在同個非同步塊中
const Home = () => import ('../views/home/Home')
const Category = () => import ('../views/category/Category')

{
        path: '/home',
        component: Home
    },
    {
        path: '/category',
        component: Category
    }

3、webpack提供的reqiure.ensure()

{
    path: '/promisedemo',
    name: 'PromiseDemo',
    component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo')
  }
  {
    path: '/hello',
    name: 'Hello',
    component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
  }