在Rsbuild中使用Rsdoctor
Rsdoctor 致力于成为一站式、智能化的构建分析工具，通过可视化与智能分析，使整个构建流程变得透明、可预测和可优化，从而帮助开发团队精准定位瓶颈、优化性能并提升工程质量
官网：https://rsdoctor.dev/index
1. Rsdoctor 的功能
构建性能分析：分析构建过程中的各个阶段（如加载、解析、编译、打包）的耗时。
模块依赖分析：可视化模块之间的依赖关系，帮助识别冗余或未使用的模块。
资源大小分析：统计打包后资源的大小，识别可能影响性能的大文件。
优化建议：根据分析结果，提供具体的优化建议（如代码分割、Tree Shaking、缓存配置）
2. 在Rsbuild中使用Rsdoctor
安装 Rsdoctor 插件
npm add @rsdoctor/rspack-plugin -D 2. 在 CLI 命令前添加 RSDOCTOR=true 环境变量
{"scripts": {"dev:rsdoctor": "cross-env API_ENV=production NODE_ENV=development RSDOCTOR=true rsbuild dev -c rsbuild/rsbuild.config.ts","build:rsdoctor": "cross-env API_ENV=production NODE_ENV=production RSDOCTOR=true rsbuild build -c rsbuild/rsbuild.config.ts"}
}3. rsbuild.config.ts 增加相关配置
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';export default {tools: {rspack: {plugins: [process.env.RSDOCTOR &&new RsdoctorRspackPlugin({// 插件选项mode: 'brief', // 在构建产物目录的 .rsdoctor 文件夹中生成一个 HTML 报告文件experiments: { // 数据处理逻辑前置，提升构建分析效率enableNativePlugin: true,},}),],},},
};3. Rsdoctor能帮助我们分析哪些问题？
3.1 构建速度太慢？
在构建过程中，如果发现编译速度过慢，可以通过 Loader 时序图([23]) 查看 loader 执行的时间开销，以及每个文件的编译时间开销，从而对性能不足的 loader 进行针对性优化。
3.2 构建结果与预期不符？
在构建过程中，可能会遇到编译结果与预期不符的问题，例如出现运行时异常或样式错误等问题。Rsdoctor 的 Loader Details([24]) 页面可以帮助你检查 loader 对特定文件的编译前后变化。
3.3 如何合理分包？
我们可以通过 产物分析([25]) 页面查看某个产物的 Modules 树来查看该产物资源包含了哪些 Modules，进而通过 Rspack 的 splitChunks([26]) 配置来进行合理的分包。
3.4 如何分析产物增大原因？
当某个版本上线后，由于产物体积增大导致线上页面性能出现劣化，可以通过 Rsdoctor 的 Bundle Diff([27]) 功能来对比两次 commit 的产物细节，以及依赖的 npm 包变化。
3.5 某个模块为什么会被打包？
构建过程中，如果想要知道某个模块文件为什么会被打包到产物中，则可以在 产物分析([28]) 页面中的 Modules 树图中点击该模块后面的 Module Graph 图标，查看该模块的上游依赖模块关系。
4. doctor一下自己的项目
1. 执行Npm run dev:rsbuild
/dist/.rsdoctor/rsdoctor-report.html
2. 执行Npm run build:rsdoctor
/dist/.rsdoctor/rsdoctor-report.html
3. 后续可以依此做进一步的优化