首先明確是什麼導致載入很慢。檢視控制檯Network，找到載入時長很長的檔案。這些檔案都是npm run build編譯之後生成的，載入慢一是因為網路慢，這個我們不考慮，另一個是檔案過大。那麼我們就要想辦法壓縮檔案。

    在討論壓縮方式之前，我們先介紹一種可以檢視各部分檔案大小及編譯後文件大小的方法。

    使用webpack-bundle-analyzer工具，先

    npm install cross-env --save-dev

  安裝依賴包，然後在package.json的scripts中新增

   "analyze":"cross-env NODE_ENV=production npm_config_report=true npm run build"，如下圖所示。

    之後執行npm run analyze就會在瀏覽器自動開啟一個頁面顯示檔案資訊。

    每一塊是一個編譯檔案及其所編譯的原始檔內容，最上方的檔案是編譯完成的檔案，下面的其他檔案就是此編譯檔案所編譯的原始檔，色塊的大小代表檔案大小，這樣我們可以很直觀地看出哪些檔案比較大。

    下面介紹幾種壓縮檔案的方式。

    1、vue-router懶載入

 

    2、工程檔案打包的時候不生成.map檔案。

    npm run build編譯之後，我們檢視編譯生成的檔案，發現有很多.map檔案，這些檔案也佔了不小的空間。.map檔案的作用是幫助編譯後的程式碼除錯，但是我們上線的程式碼已經除錯完成，所以上線時可以不生成.map檔案。

 

在config/index.js中將productionSourceMap的值修改為false，就可以在編譯時不生成.map檔案了。

    3、gzip壓縮

    這裡我使用的是nginx伺服器，找到nginx.conf檔案目錄，在配置檔案中新增以下語句，即可實現gzip壓縮。gzip的壓縮效率極高，壓縮程式碼必備。

 

    gzip_types後面的內容表示壓縮檔案的型別，需要把你要壓縮的所有檔案型別寫上去，還要考慮檔案型別支援問題。我就遇到了檔案型別問題，一開始我並沒有加入application/javascript，執行時發現檔案並沒有壓縮，後來查閱資料嘗試加入application/javascript就成功了。

    我們看到有很多javascript，application/x-javascript，application/ javascript，text/javascript，這幾個的關係引用一位網友的解釋，

 

    避免出現有些型別不支援的問題，我們最好把它們都配置上。

    4、CDN

    在專案開發中，我們會用到很多第三方庫，如果可以按需引入，我們可以只引入自己需要的元件，來減少所佔空間，但也會有一些不能按需引入，我們可以採用CDN外部載入，在index.html中從CDN引入元件，去掉其他頁面的元件import，修改webpack.base.config.js，在externals中加入該元件，這是為了避免編譯時找不到元件報錯。

    5、VUE非同步元件

    參考：https://segmentfault.com/a/1190000012138052

    6、伺服器端渲染