Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
rstackjs avatar

Rspack Best Practices

  • 466 installs
  • 86 repo stars
  • Updated August 4, 2026
  • rstackjs/agent-skills

rspack-best-practices is an agent skill that enforces Rspack configuration, CLI, CSS, bundle optimization, and profiling patterns for developers writing or troubleshooting Rspack frontend builds.

About

rspack-best-practices in rstackjs/agent-skills codifies rules for writing and reviewing Rspack projects. Configuration guidance recommends rspack.config.ts with defineConfig, explicit entry values for multi-page apps, narrow rule conditions using test, include, exclude, and resourceQuery, and preferring built-in Rspack plugins over community JavaScript alternatives when features are equivalent. The CLI section standardizes on rspack dev for local development, rspack build for production, and rspack preview only for local production previews when @rspack/cli is installed. The skill also covers type checking, CSS pipelines, asset handling, bundle optimization, and profiling during reviews or troubleshooting. Developers reach for rspack-best-practices when migrating Webpack projects, tuning production bundles, or auditing rspack.config.ts for maintainability.

  • rspack-best-practices

Rspack Best Practices by the numbers

  • 466 all-time installs (skills.sh)
  • +22 installs in the week ending Jul 26, 2026 (Skillselion tracking)
  • Ranked #887 of 4,347 Backend & APIs skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/rstackjs/agent-skills --skill rspack-best-practices

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs466
repo stars86
Last updatedAugust 4, 2026
Repositoryrstackjs/agent-skills

How do you configure rspack.config.ts for production bundles?

Use rspack-best-practices for development tasks

Who is it for?

Frontend developers writing or reviewing Rspack projects who need consistent rspack.config.ts patterns and production bundle optimization guidance.

Skip if: Teams standardized on Vite or Webpack without Rspack or projects that only need runtime JavaScript debugging unrelated to bundler config.

When should I use this skill?

User asks to write, review, troubleshoot, or optimize an Rspack config, rspack dev/build workflow, CSS rules, or bundle size.

What you get

Reviewed rspack.config.ts with explicit entries, narrow loader rules, optimized production build settings, and documented CLI workflow.

  • Reviewed rspack.config.ts
  • Documented dev and build CLI workflow

By the numbers

  • Documents 3 primary CLI commands: rspack dev, rspack build, rspack preview
  • Listed at 396 installs on skills.sh

Files

SKILL.mdMarkdownGitHub ↗

Rspack Best Practices

Apply these rules when writing or reviewing Rspack projects.

Configuration

  • Use rspack.config.ts and defineConfig
  • Define explicit entry values for multi-page applications
  • Keep one main config and branch by process.env.NODE_ENV only when needed
  • Keep rule conditions narrow and explicit (test, include, exclude, resourceQuery)
  • Prefer built-in Rspack plugins/loaders over community JS alternatives when equivalent features exist

CLI

If @rspack/cli is installed:

  • Use rspack dev for local development
  • Use rspack build for production build
  • Use rspack preview only for local production preview

Type checking

  • Use ts-checker-rspack-plugin for integrated dev/build type checks
  • Or run tsc --noEmit/vue-tsc --noEmit as an explicit script step

CSS

Choose one strategy:

  • Built-in CSS (type: 'css' | 'css/auto' | 'css/module') for modern setups
  • css-loader + CssExtractRspackPlugin for webpack migration compatibility
  • style-loader for pure style-in-JS runtime injection scenarios

Optional:

  • Use builtin:lightningcss-loader when goals are syntax downgrade + vendor prefixing
  • Use sass-loader/less-loader for preprocessing Sass/Less files
  • Use @tailwindcss/webpack for Tailwind CSS integration

Bundle size optimization

  • Prefer dynamic import() for non-critical code paths
  • Prefer lightweight libraries where possible
  • Keep target 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
  • Prefer asset modules (asset, asset/resource, asset/inline, asset/source) over legacy file-loader/url-loader/raw-loader

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
  • Replace known slow stacks first (babel-loader, PostCSS, terser) with Rspack built-ins when feasible

Security

  • Do not publish .map files to public servers/CDNs when production source maps are enabled

Documentation

  • For the latest (v2) docs, read http://rspack.rs/llms.txt
  • For Rspack v1 docs, read http://v1.rspack.rs/llms.txt

Related skills

How it compares

Pick rspack-best-practices for Rspack-specific config and bundle rules; pick Webpack or Vite skills when the project does not use Rspack.

FAQ

What Rspack CLI commands does rspack-best-practices recommend?

rspack-best-practices standardizes on rspack dev for local development, rspack build for production builds, and rspack preview only for local production previews when @rspack/cli is installed.

How should rspack.config.ts be structured?

rspack-best-practices recommends rspack.config.ts with defineConfig, explicit entry values for multi-page apps, narrow test/include/exclude/resourceQuery rule conditions, and built-in Rspack plugins over community alternatives.

Backend & APIsbackendintegrations

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.