VueCLI3打包優化-提取相關包

在項目開發中使用了許多依賴包，如Vue、路由管理Vue-router、狀態管理Vuex、UI組件庫（ElementUI、Vant）、echarts等。打包構建後，發現有些包太大，會影響主頁的加載速度。如下所示:

從上面顯示的分析包中，可以提取以下插件:

需要刪除的依賴包

VueCLI3附帶壹個webpack分析器，它可以通過以下命令生成分析包內容，該命令可以在dist/report.html中找到

有關更多信息，請參見:

https://CLI . vue js . org/zh/guide/CLI-service . html # vue-CLI-service-serve

為了減少包裝體積並加快包裝速度，有兩種常規優化方法:

按需加載是通過僅引用使用的組件來減小大小，這將有壹個問題:如果項目嚴重依賴第三方插件（如ElementUI和vant），則此方案將無法減小打包大小。

在這裏，選擇CDN的方式並配置流程:

根據環境變量，我們只能在開發環境中直接使用CDN online和npm依賴包。

包裝分離後，包裝結果:

vue.config.js的頁面如下:

修改以下地方:

外部擴展（外部）

使用webpack的外部來指定echarts無法減小包的大小。

Vue-cli使用webpack-bundle-analyzer來分析構建產品。