vue加載優化策略：1、路由懶加載；2、組件按需加載；3、使用CDN加速策略；4、使用【--】將文件打包成gzip格式。
方法一、路由懶加載
首屏加載慢的原因無非就是單頁面應用需要加載完整個路由表上的頁面，而路由懶加載就是來解決這個問題的。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。下面這個就是vue路由懶加載的一個具體例子。方法很簡單，如果您不想深入了解，只需按照這個格式引入路由就可以了。如果您對路由懶加載感興趣，請移步vue-路由懶加載
方法二、組件按需加載
為什么要按需加載組件呢？原因也很簡單，一些組件庫包含豐富的組件，如果我們直接將其引入，不免會引入一些我們壓根用不到的組件。這樣打包起來體積會比較大，同樣顯得我們很不專業。因此按需引入就顯得很必要了。我們現在就拿iview組件庫為例，了解一下按需引入的流程。
1.首先引入按需加載工具 babel--
babel--是babel它會在編譯過程中將 的寫法自動轉換為按需引入的方式。
npm install babel-plugin-import --save-dev
2.在項目根目錄創建.文件并配置按需加載內容
{
"plugins": [
[
"import",
{
"libraryName": "iview",
"libraryDirectory": "src/components"
}
]
]
}
3.在main.js配置項目需要加載的組件
下面是iview的一個例子
這里需要注意全局注冊的組件需要掛在到vue原型上，例如我們需要使用組件，那我就需要
Vue.prototype.$Notice = Notice;
這樣我們就可以正常的使用iview的組件了。
方法三、使用CDN加速策略
在Vue項目中，引入到工程中的所有js、css文件，編譯時都會被打包進.js，那么.js文件體積將會相當的大，影響首開的體驗。解決方法是，將引用的外部js、css文件剝離開來，不編譯到.js中，而是用資源的形式引用，這樣瀏覽器可以使用多個線程異步將.js、外部的js等加載下來，達到加速首開的目的。外部的庫文件，就可以使用CDN資源。vue cli3.x在配置cdn是和vue cli2.x有一些區別按需創建子文檔，vue cli在升級后，代碼結構變化比較大按需創建子文檔，配置文件集成到了vue..js文件中。下面以amap、axios和qs為例講述如何使用cdn加載資源。
1.在index.html中引入相關cdn資源
2.配置
vue cli3.x 配置是在vue..js的中
配置完之后，我們就可以正常使用全局的Amap、axios和Qs了
方法四、使用--將文件打包成gzip格式
--這個依賴在npm run build是會生成.gz文件。之后項目訪問的文件就是這個.gz文件，正常的項目打包體積會減少一半還要多，是不是很吊
下面我們來進一步講述這個這個依賴的使用流程。
1.npm 引入
npm install compression-webpack-plugin --save-dev
2.vue cli3.x在 vue..js配置
3.nginx開啟gzip模式
在上一步前端就已經配置好了，之后就是nginx配合開啟gzip模式，這個比較簡單，只要你對nginx有一點了解，我們在nginx.conf中的http中配置一些代碼
nginx壓縮功能
配置詳解
gzip on; #決定是否開啟gzip模塊，on表示開啟，off表示關閉；
gzip_min_length 1k; #設置允許壓縮的頁面最小字節(從header頭的Content-Length中獲取) ，當返回內容大于此值時才會使用gzip進行壓縮,以K為單位,當值為0時，所有頁面都進行壓縮。建議大于1k
gzip_buffers 4 16k; #設置gzip申請內存的大小,其作用是按塊大小的倍數申請內存空間,param2:int(k) 后面單位是k。這里設置以16k為單位,按照原始數據大小以16k為單位的4倍申請內存
gzip_http_version 1.1; #識別http協議的版本,早起瀏覽器可能不支持gzip自解壓,用戶會看到亂碼
gzip_comp_level 2; #設置gzip壓縮等級，等級越底壓縮速度越快文件壓縮比越小，反之速度越慢文件壓縮比越大；等級1-9，最小的壓縮最快 但是消耗cpu
gzip_types text/plain application/x-javascript text/css application/xml; #設置需要壓縮的MIME類型,非設置值不進行壓縮，即匹配壓縮類型
gzip_vary on; #啟用應答頭"Vary: Accept-Encoding"
gzip_proxied off; #nginx做為反向代理時啟用,off(關閉所有代理結果的數據的壓縮),expired(啟用壓縮,如果header頭中包括"Expires"頭信息),no-cache(啟用壓縮,header頭中包含"Cache-Control:no-cache"),no-store(啟用壓縮,header頭中包含"Cache-Control:no-store"),private(啟用壓縮,header頭中包含"Cache-Control:private"),no_last_modefied(啟用壓縮,header頭中不包含"Last-Modified"),no_etag(啟用壓縮,如果header頭中不包含"Etag"頭信息),auth(啟用壓縮,如果header頭中包含"Authorization"頭信息)
gzip_disable msie6; #(IE5.5和IE6 SP1使用msie6參數來禁止gzip壓縮 )指定哪些不需要gzip壓縮的瀏覽器(將和User-Agents進行匹配),依賴于PCRE庫
推薦配置
gzip on; #開啟gzip壓縮功能
gzip_min_length 10k; #設置允許壓縮的頁面最小字節數; 這里表示如果文件小于10個字節，就不用壓縮，因為沒有意義，本來就很小.
gzip_buffers 4 16k; #設置壓縮緩沖區大小，此處設置為4個16K內存作為壓縮結果流緩存
gzip_http_version 1.1; #壓縮版本
gzip_comp_level 6; #設置壓縮比率，最小為1，處理速度快，傳輸速度慢；9為最大壓縮比，處理速度慢，傳輸速度快; 這里表示壓縮級別，可以是0到9中的任一個，級別越高，壓縮就越小，節省了帶寬資源，但同時也消耗CPU資源，所以一般折中為6
gzip_types text/css text/xml application/javascript text/plain application/x-javascript text/javascript text/xml; #制定壓縮的類型,線上配置時盡可能配置多的壓縮類型!
gzip_disable "MSIE [1-6]\."; #配置禁用gzip條件，支持正則。此處表示ie6及以下不啟用gzip（因為ie低版本不支持）
gzip_vary on; #選擇支持vary header；改選項可以讓前端的緩存服務器緩存經過gzip壓縮的頁面; 這個可以不寫，表示在傳送數據時，給客戶端說明我使用了gzip壓縮
注意事項
4.驗證是否配置成功
這步就很簡單了只需要查看chunk類文件的 的-是否是gzip即可