使用vite内置的--mode配合rollup-plugin-visualizer插件，在构建时生成包含资源大小和依赖关系的可视化报告。该插件会在构建完成后自动输出一个html文件，展示各模块的体积占比及打包结构。
如何配置插件以生成分析报告
通过安装rollup-plugin-visualizer并在vite.config.js中引入，可以启用分析功能。设置open: true可在构建后自动打开浏览器查看报告，filename指定输出路径。
import { defineConfig } from 'vite';
import visualizer from 'rollup-plugin-visualizer';
export default defineConfig({
plugins: [
visualizer({
open: true,
filename: 'dist/stats.html',
gzipSize: true,
brotliSize: true
})
]
});
运行npx vite build后，控制台会提示报告已生成，同时浏览器会自动打开stats.html页面，显示详细的打包统计信息。
如何解读报告中的模块体积数据
报告以桑基图或树状图形式展示模块间的依赖关系和体积贡献。每个节点代表一个文件或模块，其面积对应压缩后的体积大小。通过点击节点可展开查看子模块详情，帮助定位体积过大的第三方库或未优化的代码块。
// 示例：在组件中引入大体积库
import _ from 'lodash';
// 优化前：整个lodash被打包
// 优化后：按需引入
import { debounce } from 'lodash-es';
实际项目中，若发现某个第三方库体积过大，可通过按需引入或使用更轻量的替代方案来减小最终产物。例如将lodash替换为lodash-es并仅导入需要的函数，可显著减少打包体积。
基于gzipSize参数对特定模块的分析结果
当启用gzipSize: true时，报告不仅显示原始体积，还计算Gzip压缩后的体积。这对于评估网络传输性能至关重要，因为现代服务器通常会对静态资源进行压缩。通过分析Gzip后的数据，可以更准确地判断哪些模块在实际部署中对带宽影响最大。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
