前端優化-vue-cli4安裝webpack-bundle-analyzer分析封包件

使用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小了很多。