DOCSEARCHbyAlgolia
Submit Docs

Rspack

repository·main·Indexed 11 days ago

https://github.com/web-infra-dev/rspack

A high-performance, Rust-based web bundler designed as a drop-in replacement for webpack. It offers faster build speeds and HMR while maintaining compatibility with the webpack plugin and loader ecosystem. The project includes tools for creating custom Rust bindings via rspack_binding_builder, a native plugin system using the register_plugin! macro, and a project bootstrapper via create-rspack.

Tokens
351.6K
Snippets
1.3K
Records
1.7K
Agent score
94%

What's inside Rspack

  1. What is Rspack?

    main

    Rspack is a high-performance, Rust-based JavaScript bundler designed to provide webpack interoperability and flexible configuration. It aims to significantly improve developer experience by reducing dev startup times and CI/CD build durations.

    Key characteristics include:

    • High Performance: Built in Rust to provide 5-10x improvements in build scripts compared to existing solutions.
    • Webpack Interoperability: Designed to be compatible with the webpack ecosystem, including support for many community loaders.
    • Flexible Configuration: Aims to handle complex, non-standardized configurations found in large-scale applications.
    • Production Optimization: Focuses on advanced chunk-splitting and tree-shaking strategies similar to webpack.

  2. Overview of Rspack APIs and CLI

    main
    Rspack provides several interfaces to customize and control the build process. Depending on your needs, you can interact with the build via the Command Line Interface (CLI), the JavaScript API (Node.js), Loaders for code transformation, or Plugins for tapping into the compilation lifecycle. Some configuration options are available via both CLI flags and configuration files, while others are exclusive to specific APIs.

  3. What is Rspack and its core value proposition

    main

    Rspack is a high-performance, Rust-based JavaScript bundler designed to be a drop-in replacement for webpack. It is compatible with the webpack API and ecosystem while offering significantly faster build speeds (up to 10x faster than webpack).

    Key characteristics include:

    • High Compatibility: Supports most webpack loaders and over 80% of the top 50 most downloaded webpack plugins. It is compatible with webpack v5 APIs.
    • Performance: Optimized for large-scale applications with features like lazy compilation and minimized Rust-to-JavaScript communication overhead.
    • Modern Standards: Supports modern web standards such as new Worker(), JSON module imports via Import Attributes, and CSS Module Scripts.
    • Production Ready: As of version 1.0, Rspack provides stable configuration, JavaScript, and plugin APIs.

  4. Overview of Rspack 2.0 Improvements

    main

    Rspack 2.0 introduces modern defaults, improved API design, and optimized build outputs while maintaining compatibility with the webpack ecosystem. Key areas of improvement include:

    • Performance: Up to 10% faster overall builds compared to 1.7, and up to 100% faster compared to 1.0. When using persistent cache, build performance can improve by ~50% due to cache reuse for the SWC minimizer plugin.
    • Dependency Reduction: Significant reduction in install size. @rspack/dev-server dependency count dropped from 192 to 1, and @rspack/core dropped from 8 to 1. @rspack/cli now has zero dependencies and no longer pulls in @rspack/dev-server by default.
    • Output Optimization: Enhanced static analysis, compiler annotation support, and Module Federation tree shaking.
    • ESM Support: Improved support for pure ESM packages, import.meta, and import defer.

  5. Overview of Async WASM support in Rspack

    main

    Rspack provides support for working with WebAssembly (WASM) through several specialized components. Depending on your requirements for asynchronous loading or text-based source files, you can utilize different plugins and loaders:

    1. WASM Binary: Direct handling of compiled .wasm files.
    2. WASM Loading Plugin: For managing the asynchronous loading of WASM modules.
    3. Sync WASM Plugin: For synchronous WASM integration.
    4. WAST Text Loader: For processing WebAssembly Text format (.wast) files.

  6. Overview of the Rspack Loader API

    main

    The Rspack Loader API provides the mechanisms for transforming modules during the build process. The API consists of three main components:

    1. Loader context: The object available via this inside a loader, providing access to properties and methods for the current module being processed.
    2. Inline loader: A syntax that allows you to specify a loader directly within an import statement.
    3. Inline matchResource: A mechanism to dynamically change matching rules when loading specific resources.

  7. Introduction to Rspack

    main
    Rspack is a high-performance, Rust-based web bundler designed to modernize the webpack API. It provides a seamless replacement path for webpack users by maintaining compatibility with the webpack ecosystem (plugins and loaders) while delivering significantly faster build speeds and Hot Module Replacement (HMR).

  8. What is @rspack/core

    main
    Rspack is a high-performance, Rust-based web bundler designed to be a drop-in replacement for webpack. It provides a modernized webpack-compatible API, allowing developers to leverage the speed of Rust while maintaining familiarity with existing webpack configurations and ecosystems.

  11. Use rspack_dojang as an HTML template engine

    main

    rspack_dojang is an HTML template engine that serves as a drop-in replacement for EJS. It implements the basic JavaScript syntax used by Rspack, allowing for template rendering with control flow and external function calls.

    Key Features

    • JavaScript Control Flow: Supports if, for, while, etc.
    • Template Tags: Supports script tags (<%), unescaped output (<%-), and escaped output (<%=).
    • External Functions: Supports calling external functions within templates.

    Basic Workflow

    1. Initialize the engine using Dojang::new().
    2. Load a directory containing template files using .load(path).
    3. Render a specific template by name using .render(template_name, context), where the context must be a serde_json::Value.
    use rspack_dojang::Dojang;
use serde_json::Value;

// 1. Create a template engine instance
let mut dojang = Dojang::new();

// 2. Load the directory containing template files
assert!(dojang.load("/my/template/files").is_ok());

// 3. Render a template using a serde_json::Value as context
let context: serde_json::Value = serde_json::from_str(r#"{ "a" : 1 }"#).unwrap();
let output = dojang.render("some_template", context).unwrap();

  12. Explore Rspack built-in plugins

    main

    Rspack provides a set of high-performance built-in plugins designed to enhance compilation capabilities. Many of these serve as efficient, drop-in replacements for popular webpack plugins.

    Key built-in plugins include:

    • CircularCheckRspackPlugin: Flags circular imports (replaces the deprecated CircularDependencyRspackPlugin).
    • CopyRspackPlugin: Copies files or directories to the build output.
    • CssChunkingPlugin: Splits CSS while preserving import order.
    • CssExtractRspackPlugin: Extracts styles into standalone CSS files.
    • HtmlRspackPlugin: Generates HTML and injects assets.
    • LightningCssMinimizerRspackPlugin: Minifies CSS using Lightning CSS.
    • SubresourceIntegrityPlugin: Enables subresource integrity (SRI).
    • SwcJsMinimizerRspackPlugin: Minifies JavaScript via SWC.
    • VirtualModulesPlugin: Creates and modifies virtual modules in memory.