前端工程性能優化一說意義深遠悠長，本章主要介紹除了一些基礎優化外如何實行路由懶加載、Gzip加速、CDN加速，讓網頁飛的快一些。
基礎優化
老生常談的一些：
- 不要在模板中寫復雜的表達式
- 慎用watch尤其是deep
- 合理的使用v-if/v-show/v-for
- 善用keep-alive
- 使用Object.freeze()
- ...
這里不再細開展~主要說下以下幾點：
一、 開啟GZIP
體積對比圖：
1541KB vs 466KB
耗時對比圖：
333ms vs 225ms
操作步驟：
1、安裝包（新版本的好像配置還要改~~）
2、webpack的配置
3、nginx添加配置：
server {
gzip on; #開啟或關閉gzip on off
gzip_static on;
gzip_disable "msie6"; #不使用gzip IE6
gzip_min_length 100k; #gzip壓縮最小文件大小，超出進行壓縮（自行調節）
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #壓縮文件類型
...
}
二、路由懶加載
沒有懶加載的狀態下，vue打包文件會默認把所有的業務代碼打包到一個app.js中，如果項目復雜，app.js將會很大進入首頁的時間長，不利於用戶體驗。懶加載的意思是將頁面進行划分，按需加載，進入頁面才請求，有效分擔首頁壓力，減少首頁加載時間。這個是非常有用的。
看下對比圖：
方法：
1、配置chunkFilename屬性
2、路由配置的時候，使用webpack的動態import
三、CND加速
vue打包文件會默認把所有的第三方代碼打包到一個vendor.js中，我們可以把部分超大的文件剝離出來，使用cnd資源。如圖，我們將vue/vuex/vue-router/axios分離出來降低vendor.js的壓力。
方法：
1、引入外部資源CDN
2、webpack處理（別名處理）
key：要引入的資源名稱；value：模塊提供給外部引用的名稱
3、去除引用，如果想避免全局污染，可如下定義
小改造，大優化。嘗試把三種方法都實現了，你會發現網頁好像又飛快了一點，有咩有尼？