要查看 javascript tree shaking 后的 brotli 体积，最直接的方法是使用 rollup-plugin-brotli 或 vite-plugin-compression 等构建插件在打包过程中生成 .br 文件，并通过终端命令 ls -lh 或 stat 查看文件大小。tree shaking 负责移除未使用的代码，而 brotli 压缩算法则进一步减小最终文件的体积，两者结合能显著降低网络传输开销。
使用 Rollup 插件生成并查看 Brotli 文件
在 Rollup 项目中集成 rollup-plugin-brotli 可以在构建完成后自动生成对应的 .br 文件。通过配置该插件，你可以指定输出目录和压缩级别，从而获得经过 Tree Shaking 优化后的最小化 JS 文件的 Brotli 压缩版本。查看这些文件的大小即可得知最终的传输体积。
import { brotli } from 'rollup-plugin-brotli';
export default {
input: 'src/index.js',
output: {
dir: 'dist',
format: 'es'
},
plugins: [
brotli({
include: ['**/*.js'],
compressionLevel: 11
})
]
};运行 npx rollup -c 后，在 dist 目录下执行 ls -lh *.br 即可查看生成的 Brotli 文件及其大小。例如，如果原始文件为 10KB，压缩后可能仅为 3KB 左右，具体取决于代码内容和 Tree Shaking 的效果。
立即学习“Java免费学习笔记（深入）”；
使用 Vite 插件进行本地预览与对比
Vite 默认使用 esbuild 进行快速构建，可以通过安装 vite-plugin-compression 来启用 Brotli 压缩。该插件会在构建时生成 .br 文件，方便开发者在本地直接比较压缩前后的体积差异。这种方法特别适合需要频繁迭代和验证压缩效果的开发场景。
// vite.config.js
import { defineConfig } from 'vite';
import compression from 'vite-plugin-compression';
export default defineConfig({
plugins: [
compression({
algorithm: 'brotliCompress',
ext: '.br',
threshold: 1024 // 仅压缩大于 1KB 的文件
})
]
});执行 npx vite build 后，检查 dist 目录中的 .br 文件。通过对比原始 .js 文件和 .br 文件的大小，可以直观地看到 Brotli 压缩带来的体积缩减效果。确保 Tree Shaking 已正确配置（Vite 默认开启），以获取最准确的压缩结果。
基于特定输入条件验证压缩效果
当代码中存在大量未使用的导出或依赖时，Tree Shaking 的效果尤为明显。通过引入一个包含冗余代码的示例模块，并观察压缩前后体积的变化，可以验证 Tree Shaking 是否正常工作。如果未使用的代码未被移除，Brotli 压缩的效果将大打折扣。
