如何查看 Tree Shaking 后的 gzip 体积
要查看 tree shaking 生效后的 gzip 体积，最直接的方法是使用 rollup-plugin-visualizer 或 webpack-bundle-analyzer 等打包分析插件生成可视化报告。这些工具能展示最终输出的文件树、各模块占比以及压缩后的实际大小。通过配置构建工具的优化选项并运行构建命令，即可在生成的 html 报告中直观地看到经过摇树优化和 gzip 压缩后的体积数据。
使用 Rollup 进行可视化分析的具体步骤
在使用 Rollup 构建项目时，可以通过安装 rollup-plugin-visualizer 来生成详细的包分析报告。该插件会在构建完成后自动打开一个 HTML 页面，展示每个模块的贡献度以及最终的压缩体积。这种方法特别适用于需要精确了解哪些代码被保留、哪些被移除的场景。
{
"plugins": [
visualizer({ open: true, gzipSize: true })
]
}上述配置中，gzipSize: true 参数是关键，它指示插件计算并显示 Gzip 压缩后的大小。运行 npm run build 后，浏览器会自动打开报告页面，你可以直接看到各个文件的原始大小和压缩后大小。这对于评估 Tree Shaking 的效果非常直观，因为你可以对比优化前后的体积变化。
立即学习“Java免费学习笔记（深入）”；
Webpack 环境下的 Bundle 分析方案
对于使用 Webpack 的项目，webpack-bundle-analyzer 是另一个流行的选择。它同样支持显示 Gzip 压缩后的大小，并提供交互式的图表来探索包的组成。通过在 Webpack 配置中添加该插件，开发者可以在开发过程中实时监控包体积的变化。
{
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'server',
defaultSizes: 'gzip'
})
]
}在这个配置中，analyzerMode: 'server' 会在构建完成后启动一个本地服务器并打开报告页面。defaultSizes: 'gzip' 确保默认显示的是 Gzip 压缩后的大小。这种方式与 Rollup 的方案类似，但更侧重于在 Webpack 生态中的集成和使用便利性。通过这两种工具，开发者可以准确地监控和优化项目的最终交付体积。
