DOCSEARCHbyAlgolia
Submit Docs

Rspack Documentation

website·Indexed 36 days ago

https://v1.rspack.rs

A high-performance build tool featuring built-in support for JavaScript, CSS, JSON, and static assets. Documentation covers core features like loaders, dev server, module federation, and lazy compilation, as well as optimizations such as tree shaking, lazy barrel, and bundle analysis via Rsdoctor. Includes guides for TypeScript, NestJS, Solid, and Svelte integration, and migration paths from Create React App and Rspack 0.x.

Tokens
177.2K
Snippets
1K
Records
1.3K
Agent score
61%

What's inside Rspack

  1. Overview of Rspack Dev Server

    Rspack CLI includes a built-in @rspack/dev-server for development and debugging, providing capabilities similar to webpack-dev-server such as Hot Module Replacement (HMR) and proxying. It is based on webpack-dev-server@5, which requires Node.js version 18.12.0 or higher.

  2. Overview of Rspack built-in plugins

    Rspack provides a set of high-performance built-in plugins designed as efficient, drop-in replacements for popular webpack ecosystem plugins. These include tools for dependency analysis, asset management, CSS processing, HTML generation, and minification.

  3. Overview of VirtualModulesPlugin

    The VirtualModulesPlugin allows developers to create, modify, and delete files in memory. Rspack treats these virtual files as if they were real files existing on the file system. It is a Rust-based implementation of webpack-virtual-modules designed for better performance within Rspack.

  4. Overview of Rspack customization interfaces

    Rspack provides several interfaces to customize the build process. While there is some overlap (e.g., some configuration options are available via both CLI flags and APIs), the primary methods of interaction are:

    • CLI: Used to initiate builds using configuration files and flags.
    • JavaScript API: A Node.js interface for fine-grained control, such as programmatically running/watching builds, passing multiple configurations, and collecting stats.
    • Runtime API: Handles module syntaxes and Hot Module Replacement (HMR) for updating modules in the browser without a full page refresh.
    • Loader API: Used to create transformations that process a module's source code and return a transformed version.
    • Plugin API: Allows developers to tap into the compilation process by registering handlers on lifecycle hooks to access and modify the compilation state.

  5. Overview of Rspack Layers

    Layers in Rspack allow you to categorize and manage modules to perform differentiated processing. This is particularly useful for separating code based on environments (e.g., server-side vs. client-side), using different compilation targets, or splitting modules into different output directories.

  6. Overview of the Rstack toolchain

    Rstack (Rspack Stack) is a suite of high-performance web development tools centered around the Rspack bundler. It provides specialized tools for different development scenarios to balance flexibility with an out-of-the-box experience.

  8. Understand the Rspack StatsChunk object structure

    The StatsChunk object represents a group of modules known as a chunk in Rspack. It provides detailed metadata about the chunk's composition, including the resulting files, size, loading behavior (initial vs. on-demand), and the origins of the modules that triggered the chunk's creation. This is particularly useful for analyzing bundle sizes and the effects of optimization.splitChunks.
    type StatsChunk = {
  // The list of product files contained in the chunk
  files: Array<string>;
  // The list of attached product files contained in the chunk
  auxiliaryFiles: Array<string>;
  // Chunk ID
  id?: string;
  // List of chunk names contained within this chunk
  names: Array<string>;
  // The runtime used by the chunk
  runtime: Array<string>;
  // Size of the chunk (in bytes)
  size: number;
  // Total size of chunk modules group by the output type (in bytes)
  sizes: Record<string, number>;
  // Chunk hash
  hash?: string;
  // Whether the chunk contains the rspack runtime
  entry: boolean;
  // Whether the chunk is loaded on initial page load or on demand
  initial: boolean;
  // Whether the chunk went through Code Generation
  rendered: boolean;

  // Parent chunk IDs
  parents?: Array<string>;
  // Children chunk IDs
  children?: Array<string>;
  // Sibling chunk IDs
  siblings?: Array<string>;

  // Chunk create reason when splitting chunks (need to enable `optimization.splitChunks`).
  reason?: string;
  // List of idHints of the cache groups hit when splitting chunks (need to enable `optimization.splitChunks`).
  idHints: Array<string>;

  // List of origins describing how the given chunk originated
  origins: Array<{
    // Path to the module
    module: string;
    // ID of the module
    moduleId: string;
    // The identifier of the module
    moduleIdentifier: string;
    // Relative path to the module
    moduleName: string;
    // Lines of code that generated this chunk
    loc: string;
    // The dependency request in the module
    request: string;
  }>;

  // List of modules contained in the chunk
  modules?: Array<StatsModule>;
};

  9. Reference the Rspack Stats object structure

    The Stats object provided to hooks like afterDone contains metadata about the compilation, including timing, error/warning status, and methods to export the stats as JSON or a string.
    type Stats = {
  compilation: Compilation;
  hash: Readonly<string | null>;
  startTime?: number;
  endTime?: number;
  hasErrors(): bool;
  hasWarnings(): bool;
  toJson(opts?: StatsValue): StatsCompilation;
  toString(opts?: StatsValue): string;
};

  11. Filter Rspack tracing data

    Beyond the OVERVIEW and ALL presets, RSPACK_PROFILE accepts any string compatible with the Rust EnvFilter syntax. This allows filtering by log level (TRACE, DEBUG, INFO, WARN, ERROR) or by specific modules.
    # Filter by level: output all logs (highest level)
RSPACK_PROFILE=trace

# Filter by level: output logs less than or equal to INFO
RSPACK_PROFILE=info

# Module level filtering: view only rspack_resolver logs in terminal
RSPACK_TRACE_LAYER=logger RSPACK_PROFILE=rspack_resolver

# Mixed filtering: WARN level for rspack_core
RSPACK_PROFILE=rspack_core=warn

# Mixed filtering: INFO for most, but disable rspack_resolver
RSPACK_PROFILE=info,rspack_resolver=off

  12. Integrate SolidJS with Rspack

    Rspack supports SolidJS through two primary methods: using Rsbuild for out-of-the-box support, or manually configuring Rspack using babel-loader and the Solid babel preset.