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

安裝

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"},

執(zhí)行

然后運行npm run analyzer。但是我運行后發(fā)現(xiàn)報錯了。如下：

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

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

再次運行npm run analyzer，發(fā)現(xiàn)運行成功，打開127.0.0.1就可以看到包的情況：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。