1、安装插件，一般创建vue项目的时候就已经安装
npm install --save-dev webpack-bundle-analyzer
2、执行命令
npm run build -- --report
3、执行完成后用浏览器打开report.html即可
image.png
效果如下
image.png
如果需要增加个性化配置在vue.config文件中修改configureWebpack配置
官网地址 https://www.npmjs.com/package/webpack-bundle-analyzer
image.png
configureWebpack: config => {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
return {
// js打包编译后的文件名称【模块名称.时间戳】
output: {
filename: `[name].${timestamp}.js`,
chunkFilename: `[name].${timestamp}.js`
},
plugins: [new CompressionPlugin({
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 10240, //对超过10k的数据进行压缩
deleteOriginalAssets: false //是否删除原文件
}),
new BundleAnalyzerPlugin({
analyzerMode: "server",
analyzerHost: "127.0.0.1",
analyzerPort: 9999, // 运行后的端口号
reportFilename: "report.html",
defaultSizes: "parsed",
openAnalyzer: true,// 在默认浏览器中是否自动打开报告 默认为true
generateStatsFile: false,
statsFilename: "stats.json",
statsOptions: null,
logLevel: "info"
})]
}
}
然后运行
npm run build --report
