第一次打包vue的項目部署到服務器下時，發現初次加載特別的緩慢，將近20s頁面才加載出來，完全沒有開發環境上的那么流暢。主要原因是頁面在打包后如果不進行相關配置會導致資源文件特別的大，一次想要全部加載完成會特別的耗時。這里簡單總結一下自己用到的一些優化的方案。
解決方案一：
- 去掉編譯文件中map文件。在編譯好后，我們會看到文件夾下有特別多的.map文件，這些文件主要是幫助我們線上調試代碼，查看樣式。所以為了避免部署包過大，通常都不生成這些文件。
在 vue.config.js 文件中將productionSourceMap 的值設置為false. 再次打包就可以看到項目文件中已經沒有map文件 （文件大小 35MB-->10.5MB）。 - vue-router 路由懶加載
懶加載即組件的延遲加載，通常vue的頁面在運行后進入都會有一個默認的頁面，而其他頁面只有在點擊后才需要加載出來。使用懶加載可以將頁面中的資源劃分為多份，從而減少第一次加載的時候耗時。
懶加載路由配置：
image.png
解決方案二：
使用CDN減小代碼體積加快請求速度
1. 為什么使用CDN
使用CDN主要解決兩個問題：
- 打包時間太長、打包后代碼體積太大，請求慢
- 服務器網絡不穩帶寬不高，使用cdn可以回避服務器帶寬問題
2. 具體步驟
- 首先我們要使用 Vue CLI（@vue/cli）自帶的 webpack 包體積優化工具，它可以查看各個模塊的 size 大小，方便優化。注意：網上很多說要先安裝 webpack-bundle-analyzer 包，其實不需要安裝。
修改vue.config.js添加這行代碼：
image.png
根據上面的配置后，運行 npm run build后，打開后如下圖，我們可以看到 ElementUI 和 Echarts 占用較大，直接打包了 node_modules 里面框架的內容。
image.png
2.將element、echart等都改外部引用，在/index.html中引入CDN
<!-- 引入樣式 -->
<link rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.3/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.9.1/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.5.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsplumb@2.15.5/dist/js/jsplumb.min.js"></script>
注意:修改配置后還是提示Element未定義，是因為Element依賴Vue，vue.js需要在element-ui之前引入，所以vue.js也要改為cnd的引入方式.
- 修改vue.config.js中配置，添加externals屬性(詳見https://webpack.docschina.org/configuration/externals/)，其中鍵是項目中引用的，值是所引用資源的名字。需要注意的是資源名需要查看所引用的JS源碼，查看其中的全局變量是什么，例如element-ui的全局變量就說ELEMENT
image.png
- 刪除原先的important
如果不刪除原先的import，項目還是會從node_modules中引入資源。
也就是說不刪的話，npm run build時候仍會將引用的資源一起打包，生成文件會大不少。
image.png
打包優化前后對比
image.png
