Rsbuild Best Practices
Apply Rsbuild and Rspack configuration, CLI, type-check, bundle, asset, and security rules when coding or reviewing frontend builds.
Overview
Rsbuild Best Practices is an agent skill most often used in Build (also Ship perf and security) that standardizes Rsbuild config, CLI, type checks, bundles, assets, and debugging for solo frontend workflows.
Install
npx skills add https://github.com/rstackjs/agent-skills --skill rsbuild-best-practicesWhat is this skill?
- Configuration rules: defineConfig, rsbuild.config.ts, source.entry for MPAs, path aliases before custom Rspack chains
- CLI workflow: rsbuild dev, rsbuild build, rsbuild preview locally, rsbuild inspect for final configs
- Type checking via @rsbuild/plugin-type-check or explicit tsc/vue-tsc --noEmit scripts
- Bundle optimization: dynamic import() for non-critical paths, lightweight deps, browserslist aligned to real targets
- Security: do not publish .map files to public CDNs when production source maps are enabled; debug with DEBUG=rsbuild
- Documented CLI verbs: rsbuild dev, build, preview, inspect
- Type-check paths: @rsbuild/plugin-type-check or tsc/vue-tsc --noEmit
Adoption & trust: 960 installs on skills.sh; 72 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your Rsbuild project drifts into ad-hoc Rspack hacks, wrong asset paths, or heavy bundles because nobody applied a consistent config and CLI checklist.
Who is it for?
Solo builders on TypeScript or Vue Rsbuild apps who want agent-guided reviews before merge or while fixing build failures.
Skip if: Teams on Webpack-only or Vite-only stacks with no Rsbuild/Rspack footprint; greenfield projects where you will not maintain rsbuild.config.ts.
When should I use this skill?
Use when writing, reviewing, or troubleshooting Rsbuild projects.
What do I get? / Deliverables
After applying the skill, rsbuild.config.ts, scripts, and reviews follow explicit Rsbuild-first patterns with safer assets, leaner splits, and DEBUG=rsbuild when configs misbehave.
- Reviewed rsbuild.config.ts aligned to first-class Rsbuild options
- Documented dev/build/preview/inspect scripts and type-check strategy
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Primary shelf is Build because Rsbuild is the frontend bundler/dev-server toolchain most owners touch while implementing apps. Frontend subphase covers rsbuild.config.ts, entries, dynamic imports, and source-managed assets—not backend APIs.
Where it fits
Author rsbuild.config.ts with defineConfig and explicit source.entry for a multi-page SaaS shell.
Choose @rsbuild/plugin-type-check versus a package.json tsc --noEmit step before merging.
Add dynamic import() on non-critical routes and trim dependencies after browserslist review.
Block publishing .map files to a public CDN while production source maps stay enabled internally.
Diagnose a broken production build locally with rsbuild inspect and DEBUG=rsbuild logging.
How it compares
Rsbuild/Rspack procedural checklist for agents—not a replacement for reading upstream Rsbuild release notes or a generic “optimize React” skill.
Common Questions / FAQ
Who is rsbuild-best-practices for?
Indie and solo frontend developers shipping apps with Rsbuild who want consistent agent help for config, CLI, typing, bundles, and assets.
When should I use rsbuild-best-practices?
Use it while building frontend features and configs, during Ship perf tuning (dynamic imports, browserslist), and when diagnosing builds with rsbuild inspect or DEBUG=rsbuild.
Is rsbuild-best-practices safe to install?
It is documentation-style agent guidance without inherent runtime privileges; still review the Security Audits panel on this Prism page before adding skills from third-party repos to your agent.
SKILL.md
READMESKILL.md - Rsbuild Best Practices
# Rsbuild Best Practices Apply these rules when writing or reviewing Rsbuild projects. ## Configuration - Use `rsbuild.config.ts` and `defineConfig` - Use `tools.rspack` or `tools.bundlerChain` only when no first-class Rsbuild option exists - Define explicit `source.entry` values for multi-page applications - In TypeScript projects, prefer `tsconfig.json` path aliases first ## CLI - Use `rsbuild` for local development - Use `rsbuild build` for production build - Use `rsbuild preview` only for local production preview - Use `rsbuild inspect` to inspect final Rsbuild/Rspack configs ## Type checking - Use `@rsbuild/plugin-type-check` for integrated dev/build type checks - Or run `tsc --noEmit`/`vue-tsc --noEmit` as an explicit script step ## Bundle size optimization - Prefer dynamic `import()` for non-critical code paths - Prefer lightweight libraries where possible - Keep browserslist aligned with real compatibility requirements ## Asset management - Import source-managed assets from project source directories, not from `public` - Reference `public` files by absolute URL path ## Security - Do not publish `.map` files to public servers/CDNs when production source maps are enabled ## Debugging - Run with `DEBUG=rsbuild` when diagnosing config resolution or plugin behavior - Read generated files in `dist/.rsbuild` to confirm final config, not assumed config ## Profiling - Use Node CPU profiling (`--cpu-prof`) when JavaScript-side overhead is suspected - Use `RSPACK_PROFILE=OVERVIEW` and analyze trace output for compiler-phase bottlenecks ## Documentation - For the latest (v2) docs, read http://rsbuild.rs/llms.txt - For Rsbuild v1 docs, read http://v1.rsbuild.rs/llms.txt