vue-cli3配置webpack-bundle-analyzer的方法
1.安装webpack-bundle-analyzer;npm installwebpack-bundle-analyzer -D;2.在vue.config.js中配置:chainWebpack: config => {config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').Bundle
·
1.安装webpack-bundle-analyzer;
npm install webpack-bundle-analyzer -D;
2.在vue.config.js中配置:
chainWebpack: config => {
config.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
},
3.运行:npm run serve
默认端口8888;http://127.0.0.1:8888/ 查看效果
4.以上配置存在缺陷
当使用npm run serve第一次运行后,访问http://127.0.0.1:8888/ 可以看到分析页面,但如果再进行npm run build时,会提示8888端口被占用。然而检查系统端口,发现并没有被占用,也不知怎么关闭,所以找到了第二种配置方法:
首先在vue.config.js中引入:
let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
然后在configureWebpack中增加:
plugins: [
new BundleAnalyzerPlugin(
{
analyzerMode: 'static',//可选值有server static disabled
generateStatsFile: false,
statsOptions: { source: false },
openAnalyzer: false
}
)
]
这时无论执行npm run serve还是npm run build,都不会有问题;npm run serve时,会产生一个dist文件夹,里面的report.html就是分析页。
更多推荐
已为社区贡献6条内容
所有评论(0)