mcpField
R
rsbuild-best-practices

rsbuild-best-practices

github.com/rstackjs开发972.8k 次安装6 天前更新
代码仓库

关于 rsbuild-best-practices

rsbuild-best-practices 是用于编写和审查 Rsbuild 项目的技能，涵盖配置、命令行、类型检查、资源管理、调试、安全与性能分析。

主要功能

  1. 01Rsbuild 配置指导
  2. 02开发与构建命令行用法
  3. 03类型检查建议
  4. 04资源与 source map 规范
  5. 05调试和性能分析方法

适用场景

  1. 01配置多页面 Rsbuild 项目
  2. 02在开发或构建中加入类型检查
  3. 03排查打包、配置或编译器问题

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/rstackjs/agent-skills --skill rsbuild-best-practices

安装后在 Claude Code 中输入/rsbuild-best-practices确认已加载。

详细介绍

Rsbuild 最佳实践

编写或审查 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 文件

安全

  • 启用生产源映射时，不要将 .map 文件发布到公共服务器/CDN

调试

  • 诊断配置解析或插件行为时，使用 DEBUG=rsbuild 运行
  • 阅读 dist/.rsbuild 中生成的文件，以确认最终配置，而不是依赖假定的配置

性能分析

  • 怀疑 JavaScript 端开销过高时，使用 Node CPU 性能分析（--cpu-prof）
  • 使用 RSPACK_PROFILE=OVERVIEW 并分析跟踪输出，查找编译器阶段的瓶颈

文档

评论

支持 Markdown