使用vue-cli3創建了一個工程目錄，技術棧為vue-cli3+vue-router+vuex+element-ui+v-charts+axios。但是等到項目開發完后，發現生成的app.js特別大，接近10M。為了優化項目性能，需要使用webpack-bundle-analyzer分析包文件，找出最占用空間的插件有哪些，對應做出優化。

安裝

cnpm install webpack-bundle-analyzer -D

修改vue.config.js

module.exports = {chainWebpack: config => {if (process.env.use_analyzer) { // 分析config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)}}}

修改package.json

"scripts": {"analyzer": "use_analyzer=true npm run serve"},

執行

然后運行npm run analyzer。但是我運行后發現報錯了。如下：

原來由于windows下不支持xxx=xxx這種寫法。為了支持這種寫法，用npm安裝cross-env。然后修改package.json，如下:

"analyzer": "cross-env use_analyzer=true npm run serve"

再次運行npm run analyzer，發現運行成功，打開127.0.0.1就可以看到包的情況：

注：上述已是優化后看到的圖，未優化前，element-ui和v-charts占用了很大的控件。針對這兩個插件做了優化后（采用CDN方式），app.js小了很多。

總結

以上是生活随笔為你收集整理的前端优化-vue-cli4安装webpack-bundle-analyzer分析包文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。