這個特殊服務就是讓我們的Vue專案夠快 體驗如絲般順滑的載入速度。不要想歪了。

相信大家在開發Vue較中型的專案時會發現 首屏載入真特麼慢，特別是引用了一些外掛和UI框架的

run build的時候會有三個主要的JS檔案

app.js是入口js     <包含了我們所有寫的業務JS>

vendor則是通過提取公共模組外掛來提取的程式碼塊   

manifest則是在vendor的基礎上，再抽取出要經常變動的部分，比如關於非同步載入js模組部分的內容。

相信很多朋友引入一些 輪播 路由 或其他UI框架的時候

vendor構建出來的至少1.幾M以上

也是首屏載入緩慢的一個罪魁禍首

在大家開始進行專案優化時。可以在本地安裝一個依賴webpack-bundle-analyzer
 

npm install --save-dev webpack-bundle-analyzer

裝完之後 不用任何script

npm run build --report

成功後大家可以看到一個圖形化的介面

 咱們開始第一步的優化

首先我們看自己所用的外掛和框架是否有對應的CDN加速靜態資源

https://www.bootcdn.cn/

這是國內較快的靜態資源CDN，大家可以在裡面搜尋，並在index.Html中引入

    <link href="https://cdn.bootcss.com/mint-ui/2.2.13/style.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
 

  博主引入了vue  vuex vue-router  mint-ui axios 和對應的樣式檔案

為什麼我們選擇分離出外掛用CDN靜態資源引入呢。

1.相對於整合如vender.js中，分離出靜態資源能有效減少包的大小，從而減少首屏的載入速度

2.伺服器的程式碼即使打開了gzip。載入速度也沒有國內公用的CDN靜態資源快速

以上兩點便是分離靜態資源的主要原因

我們在HTML引入之後。我們還需要再

 webpack.base.conf.js

 即使我們先前npm裝了依賴， 我們要告訴webpack在構建時 要將我們所宣告的框架與外掛不進行打包，使用外部擴充套件

感興趣的可以：https://webpack.docschina.org/configuration/externals/ 官方有很好的解釋

我們在檔案中所引用的import  from後面的 便是externals中前面所定義的key。

import Router from 'vue-router'

並且要將對應的Vue.use(...)進行註釋 例如VueRouter

在調整的過程當中 可以根據webpack-bundle-analyzer所反饋的圖形化介面來檢視具體構建後的大小。

分離後 可以run dev跑一下測試環境 是否正常。

由於專案中用到了部分無CDN靜態資源的，不能分離的~所以整體來vendor減少了50%的大小，若大部分資源都有CDN靜態資源的話，會下降更多。

之後就是gzip，需要服務端進行配合的。

如下圖找到對應的檔案，productionGzip改為true，開啟Gzip壓縮 

找到下圖的檔案，這裡是Gzip的配置 

配置完畢後執行npm run build，壓縮後文件列表中 有 .gz結尾的。這是gzip檔案的字尾，需要ng那邊進行解析。

修改伺服器的配置，這裡的伺服器是Nginx 
           找到conf目錄下的nginx.conf ,開啟gzip,並設定gzip的型別，如下

gzip  on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

 重新部署伺服器nginx -s reload 

之後大家在次構建專案後，檢視Response Headers中。若為Content-Encoding:gizp，則為成功了。

記得ng一定要重新整理 並且重新部署一次後檢視。

可以看到 按需載入 + 靜態資源CDN分離 + gzip後。首屏載入速度提升了非常多。

專案中細節的優化點有很多，這裡就不細講了

基本上就是減少HTTP請求，避免堵塞載入的情況，

常用的就是雪碧圖，快取機制，DOM節點的優化避免迴流重繪。還有就是服務端渲染

Vue-SSR。下篇文章博主會說一下Vue的服務渲染，感興趣的同學點個贊，有問題的歡迎評論。

                          幫到你的話 點贊是對本系列最大的支援！

                                                                        我叫Daniel  還沒有用洗面奶洗頭的開發