SuperAPI AI 工具集

rsbuild-best-practices

前端与建站

查看项目

更新于 10-16 09:52

技能介绍

用途:在编写或审查 Rsbuild 项目时套用这些最佳实践,帮助配置、优化和排查构建与开发问题。

主要能力与规则:

配置

  • 使用 rsbuild.config.ts 与 defineConfig。
  • 仅当没有 Rsbuild 一等选项时,才使用 tools.rspack 或 tools.bundlerChain。
  • 多页应用需显式定义 source.entry。
  • TypeScript 项目优先使用 tsconfig.json 路径别名。

CLI

  • 本地开发用 rsbuild。
  • 生产构建用 rsbuild build。
  • rsbuild preview 仅用于本地生产预览。
  • 用 rsbuild inspect 查看最终 Rsbuild/Rspack 配置。

类型检查

  • 使用 @rsbuild/plugin-type-check 集成开发/构建类型检查。
  • 或显式运行 tsc --noEmit / vue-tsc --noEmit 脚本步骤。

打包体积优化

  • 非关键代码路径优先使用动态 import()。
  • 尽量选择轻量库。
  • 保持 browserslist 与实际兼容需求一致。

资源管理

  • 从项目源码目录导入源码管理的资源,而非 public。
  • 通过绝对 URL 路径引用 public 文件。

安全

  • 启用生产 source map 时,不要将 .map 文件发布到公共服务器/CDN。

调试

  • 排查配置解析或插件行为时用 DEBUG=rsbuild 运行。
  • 查看 dist/.rsbuild 中的生成文件确认最终配置,而非假想配置。

性能分析

  • 怀疑 JavaScript 侧开销时使用 Node CPU profiling(--cpu-prof)。
  • 编译器阶段瓶颈使用 RSPACK_PROFILE=OVERVIEW 并分析 trace 输出。

文档

  • 最新 v2 文档见 http://rsbuild.rs/llms.txt。
  • v1 文档见 http://v1.rsbuild.rs/llms.txt。

限制:资料未提供各命令的参数细节、兼容版本范围、具体性能基准或收费信息。