安装
npm install webpack-bundle-analyzer --save-dev
webpack配置
// 使用@vue/cli初始化的项目
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
publicPath: '/',
configureWebpack: config => {
config.plugins.push(new BundleAnalyzerPlugin())
}
}
输出结果
bundle analyzer.png
- 分析输出页面独立于前端项目访问。如图，webpack-bundle-analyzer访问地址为http://localhost:8888，而前端项目访问地址为http://localhost:8080
- 在build模式下，在正常输出前端编译文件外，会另外启动结果分析页
