重庆自适应网站建设,wordpress 密码加密,wordpress怎么做图片预览,昆明网站建设 熊掌号使用vue-cli3创建了一个工程目录#xff0c;技术栈为vue-cli3vue-routervuexelement-uiv-chartsaxios。但是等到项目开发完后#xff0c;发现生成的app.js特别大#xff0c;接近10M。为了优化项目性能#xff0c;需要使用webpack-bundle-analyzer分析包文件#xff0c;找出…使用vue-cli3创建了一个工程目录技术栈为vue-cli3vue-routervuexelement-uiv-chartsaxios。但是等到项目开发完后发现生成的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_analyzertrue npm run serve},
执行
然后运行npm run analyzer。但是我运行后发现报错了。如下 原来由于windows下不支持xxxxxx这种写法。为了支持这种写法用npm安装cross-env。然后修改package.json如下:
analyzer: cross-env use_analyzertrue npm run serve
再次运行npm run analyzer发现运行成功打开127.0.0.1就可以看到包的情况 注上述已是优化后看到的图未优化前element-ui和v-charts占用了很大的控件。针对这两个插件做了优化后采用CDN方式app.js小了很多。
