Skip to main content

Rspack Overview

Archibald utilizes Rspack (v1.7.6) as its primary bundler. Rspack is a high-performance, Rust-based bundler that serves as a drop-in replacement for Webpack, offering significantly faster build times while maintaining compatibility with the Webpack ecosystem.

The Rspack backend lives inside @archibald/cli and is the framework's default bundler — every archibald serve and archibald build compiles through it, no opt-in needed, and projects never import it directly. Beyond the configurations it supplies:

  • a compiler executor that drives builds and the dev server (HMR, React/Preact refresh, progress reporting),
  • a forked-process runner (@archibald/cli/forker-rspack, enabled via cli.development.fork) that isolates heavy compilation in a child process,
  • in-memory (memfs) output for dev serving and Workbox-based service-worker generation.

Project-level customization does not happen inside the framework configs but through the override seams — see Extending Rspack Configuration and Overriding the Rspack config.

Core Architecture​

The Rspack configuration in Archibald is built upon a modular foundation:

  1. rspack.base.config.ts: The "Common Sense" foundation. It defines universal rules for loaders (SWC, SCSS, SVG), aliases, and the core plugin stack.
  2. rspack.development.config.ts: Layered on top of the base config for local work. Focused on speed, HMR, and debugging.
  3. rspack.production.config.ts: Layered for deployment. Focused on payload size, compression, and minification.

Key Tooling​

  • SWC (@swc/core): The Rust-based transpiler used for all TypeScript and JSX files. It replaces Babel for vastly superior performance.
  • Lightning CSS: Used via LightningCssMinimizerRspackPlugin for extremely fast and efficient CSS minification and tree-shaking.
  • Workbox: Integrated via @aaroon/workbox-rspack-plugin for automated Service Worker generation.
  • Compression Plugin: Generates both Brotli (.br) and Gzip (.gz) versions of all assets for optimal delivery.

The Role of webpack-merge​

Archibald uses webpack-merge to deeply combine these configuration layers. This allows the framework to maintain a clean base config while precisely targeting the needs of different environments (Development vs. Production) and platforms (Web vs. Native).

Extending the Configuration​

For advanced use cases, Archibald allows you to hook directly into the configuration flow via an extension file (e.g., rspack.extend.config.ts). This allows you to add custom loaders, plugins, or aliases without modifying the framework's core configuration files.

For more details, see the Extending Rspack Configuration guide.