1、 安装
npm install webpack-bundle-analyzer --save-dev
2、 vue.config.js
const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin
configureWebpack: config => {
if (process.env.NODE_ENV === ‘production‘) {
return {
plugins: [
new BundleAnalyzerPlugin()
]
}
}
}
3、 package.json
"analyz": "npm_config_report=true npm run build" // 打包命令,根据实际灵活修改
4、 npm run analyz //默认8888 端口
5、 浏览器打开localhost:8888
安装插件
npm install webpack-bundle-analyzer --save-dev
在build/webpack.prod.config.js引入配置
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: ‘server‘,
analyzerHost: ‘127.0.0.1‘,
analyzerPort: 8889,
reportFilename: ‘report.html‘,
defaultSizes: ‘parsed‘,
openAnalyzer: true,
generateStatsFile: false,
statsFilename: ‘stats.json‘,
statsOptions: null,
logLevel: ‘info‘
}),
]
运行
npm run build // 正常的打包命令
浏览器打开
localhost:8889
原文：https://www.cnblogs.com/web-zqk/p/13873356.html