【學習】Vue 載入優化以及元件非同步載入缺點解決方案

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

優點： 適應力強，載入迅速，體驗良好

缺點： 還是得團隊交流

部分學習自詹一樹