webpack-bundle-analyzer 打包分析

最新推荐文章于 2025-10-12 15:45:13 发布

原创最新推荐文章于 2025-10-12 15:45:13 发布 · 395 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端 #node.js

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何通过npm安装webpack-bundle-analyzer并配置webpack.config.js，然后运行项目生成模块大小报告。通过127.0.0.1:8888访问报告，可以详细查看项目各模块的大小，以便进行按需优化。

安装工具

npm install webpack-bundle-analyzer --save-D

配置webpack.config.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [
	new BundleAnalyzerPlugin(
	    {
	       analyzerMode: 'server',
	       analyzerHost: '127.0.0.1',
	       analyzerPort: 8888,
	       reportFilename: 'report.html',
	       defaultSizes: 'parsed',
	       openAnalyzer: true,
	       generateStatsFile: false,
	       statsFilename: 'stats.json',
	       statsOptions: null,
	       logLevel: 'info'
	    }
	),
]