Vite缩小打包体积:使用 visualizer 分析文件依赖关系与文件大小

Vite 中用 manualChunks 分割打包时,找文件依赖很麻烦,用 rollup-plugin-visualizer 可以帮我们找出依赖关系、分析依赖包的大小。

安装插件 rollup-plugin-visualizer

pnpm i -D rollup-plugin-visualizer

使用插件

vite.config.js 中添加:

1
2
3
4
5
import { visualizer } from 'rollup-plugin-visualizer';

plugins:[
visualizer({ open: true }) // 使用依赖分析,open: true 开启编译完成后自动弹出分析结果 html 页面
]

分析结果

执行 pnpm build,编译完成后,会在浏览器中自动打开下面的页面:

visualizer