版本
- 5.14.0
安装
-
使用 pnpm
pnpm add rollup-plugin-visualizer
配置
-
template: treemap（默认值，可不设置）
import { visualizer } from 'rollup-plugin-visualizer' visualizer({ open: true, gzipSize: true, brotliSize: true, template: 'treemap',}),
- template: sunburst（循环层次结构图）
- template: flamegraph（sunburst 自上而下的版本，能够清晰看到调用栈）
- template: network
- template: raw-data（输出为 json 文件，一般与其它 cli 工具配合使用）
- template: list（yml 文件）
功能介绍
- 点击具体块能够放大，这里是查看某一个文件自己写的代码明细
文件过滤
可以在 Exclude 筛选框排除不需要查看的文件，在 Include 筛选框输入需要查看的文件，注意这里的文件不是打包后的文件，而是项目原始文件路径，满足 picomatch
- 查看包含页面的打包文件（页面放在 views 下面）
- 查看首页的打包文件
- 查看包含 node_modules 的打包文件
- 查看不包含 node_modules 的打包文件
通过查看具体页面的代码打包情况，可以找到不应该打包在当前页面的模块；如果某一个页面的打包文件中出现了根本没有使用的情况，可以查看代码中的模块引用，查看是否存在循环依赖，或者聚合通配符导出模块中是否存在副作用的情况
