7-26日再更新
元件懶載入有三種方式：
1. es6 = () =>import('../../xx')
2. vue非同步 = resolve => require(['../../xx'], resolve)
3. webpackrequire.ensure r => require.ensure([], () => r(require('../components/Hello')), 'demo')
1. 元件按需載入 也是一樣棄用import 換用require
2. 程式碼分塊
3. 路由懶載入 結合 Vue 的 非同步元件 和 Webpack 的 code splitting feature,可以輕鬆實現路由元件的懶載入．
const Foo = resolve => { /* require.ensure 是 Webpack 的特殊語法，用來設定 code-split point （程式碼分塊）*/ require.ensure(['./Foo.vue'], () => { resolve(require('./Foo.vue')) }) } 複製程式碼/* 另一種寫法 */
const Foo = resolve => require(['./Foo.vue'], resolve);
複製程式碼4. 壓縮（webpack/服務端）
5. Webpack2 Tree-shaking （清除無用程式碼）
6. SSR(Server Side Render/服務端渲染)
關於非同步元件懶載入：
優點： 減小包體積，提高載入速度
缺點： 需要團隊交流； 多次請求造成渲染參差不齊。
解決： 建立多層目錄，使用複合方案。
Eg:
syncCom
commonCom
rootCom
childCom
優點： 適應力強，載入迅速，體驗良好
缺點： 還是得團隊交流
部分學習自詹一樹