使用 npx rollup --config 配合 @rollup/plugin-visualizer 插件，在构建时生成可视化的产物分析报告。该工具会统计每个模块的体积及其被引用的路径，通过生成的 html 文件直观展示 tree shaking 后的实际输出结构。
如何配置 Rollup 以生成可视化报告
安装 @rollup/plugin-visualizer 并将其加入 rollup.config.js 的 plugins 数组中。运行构建命令后，会在 stats.html 文件中生成桑基图（Sankey Diagram），清晰展示源文件到最终产物的体积映射关系。
import { visualizer } from '@rollup/plugin-visualizer';
export default {
input: 'src/main.js',
output: { file: 'dist/bundle.js', format: 'iife' },
plugins: [
visualizer({ open: true, filename: 'stats.html' })
]
};
执行 npx rollup -c 后，浏览器会自动打开报告页面。图中左侧为源代码模块，右侧为打包后的代码块，中间的连线宽度代表体积占比。未使用的代码不会出现在右侧，从而验证了 Tree Shaking 的效果。
分析报告中未移除的代码原因
如果报告中显示某些模块未被摇树优化，通常是因为它们被标记为副作用或存在循环依赖。检查 package.json 中的 sideEffects 字段，确保纯函数模块未被误标。同时，确认导入语句是否使用了静态分析可识别的形式。
// src/utils.js
export const helper = () => {};
// 错误：动态导入导致无法静态分析
import('./utils').then(m => m.helper());
上述代码中，动态导入会导致 utils.js 无法被完全消除，因为其在运行时才被引用。将导入改为静态形式 import { helper } from './utils' 后，Rollup 能正确识别并移除未使用的导出。报告中若发现此类情况，应优先调整导入方式而非忽略警告。
特定模块在产物中的具体体积占比是多少
在生成的 stats.html 中，点击具体的模块节点可查看其详细体积。例如，若 lodash-es 占用较大空间，说明未正确使用按需导入。通过对比源文件与产物节点的连线宽度，可量化评估优化前后的差异。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
