Rspack

基于 Rust 的高性能 Web 打包器，兼容 Webpack 生态

技术简介

Rspack 是由字节跳动（ByteDance）开源的、基于 Rust 编写的高性能 Web 模块打包器。它的诞生源于一个现实痛点：随着前端项目规模不断增长，Webpack 作为最主流的打包工具，其基于 JavaScript 的实现逐渐暴露出性能瓶颈——大型项目的构建耗时动辄数十秒甚至数分钟，严重影响开发效率和迭代速度。

与此同时，Rust 工具链在前端领域兴起（如 SWC、Lightning CSS、Turbopack 等），证明了 Rust 在内存安全和并行计算方面的天然优势可以大幅提升构建性能。Rspack 正是在这一背景下应运而生——它的目标不是另起炉灶，而是在兼容 Webpack 生态（loader、plugin、配置格式）的前提下，用 Rust 重写核心引擎，实现 5-10 倍的性能提升。

Rspack 采用 Rust + TypeScript 并行架构：核心编译流程（解析、依赖图构建、代码生成）由 Rust 实现以获得极致性能，而上层配置解析、插件 API 等仍使用 TypeScript 以保持与 Webpack 生态的兼容性。这种设计使得大量现有的 Webpack 配置和插件可以低成本迁移到 Rspack。

2026 年 4 月，Rspack 2.0 正式发布，标志着项目进入新阶段——更现代的默认配置、更精简的依赖树、更纯粹的 ESM 输出，以及持续的性能优化。

基本信息

快速上手

安装

使用官方脚手架工具创建新项目：

# 使用 pnpm（推荐）
pnpm create rspack@latest my-project
 
# 使用 npm
npm create rspack@latest my-project
 
# 使用 yarn
yarn create rspack my-project
 
# 进入项目目录
cd my-project
 
# 安装依赖
pnpm install
 
# 启动开发服务器
pnpm dev

脚手架会引导你选择项目模板（JavaScript / TypeScript / React / Vue 等）和包管理器。

在已有项目中安装

# 安装核心包
pnpm add -D @rspack/core @rspack/cli
 
# 如果从 Webpack 迁移，大部分 loader 和 plugin 可复用
pnpm add -D @rspack/plugin-html

基础配置

在项目根目录创建 rspack.config.js 或 rspack.config.ts：

// rspack.config.js
import { defineConfig } from '@rspack/cli'
 
export default defineConfig({
  // 入口
  entry: './src/index.js',
 
  // 输出
  output: {
    path: './dist',
    filename: '[name].[contenthash:8].js',
    clean: true,
  },
 
  // 模块规则（与 Webpack module.rules 兼容）
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'builtin:swc-loader', // Rspack 内置 SWC loader
        options: {
          jsc: {
            parser: { syntax: 'typescript', tsx: true },
            transform: { react: { runtime: 'automatic' } },
          },
        },
      },
      {
        test: /\.css$/,
        type: 'css', // 内置 CSS 支持，无需 css-loader
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: 'asset/resource',
      },
    ],
  },
 
  // 插件
  plugins: [],
 
  // 开发服务器
  devServer: {
    port: 3000,
    hot: true,
    open: true,
  },
})

最小示例

// rspack.config.minimal.js
import { defineConfig } from '@rspack/cli'
 
export default defineConfig({
  entry: './src/index.js',
})

# 直接构建
npx rspack build
 
# 启动开发模式
npx rspack serve

Rspack 内置了大量常用功能的默认配置，包括 CSS 处理、静态资源处理、代码分割、Tree Shaking 等，大多数场景下只需极少配置即可工作。

核心概念与架构

Rust 核心引擎

Rspack 的核心编译流水线使用 Rust 实现，包括：

• 模块解析（Resolver）：基于增强版 oxc_resolver，支持 Webpack 的 resolve 配置
• 依赖图构建：Rust 原生并行处理，自动分析模块依赖关系
• 代码生成（Code Generation）：针对 JS/TS/CSS/JSON 等格式的高性能代码生成
• Tree Shaking：基于静态分析的 dead code elimination
• 代码分割（Code Splitting）：智能 chunk 分割策略
• 压缩（Minification）：集成 SWC Minifier 和 Lightning CSS

TypeScript 兼容层

在 Rust 引擎之上，Rspack 维护了一层 TypeScript 编写的兼容层：

• 配置解析：兼容 Webpack 的配置格式（module.rules、optimization、plugins 等）
• Loader 兼容桥：将 Webpack loader 协议适配到 Rspack 的内部流水线
• Plugin API：兼容 Webpack 的 Tapable 插件系统
• CLI 工具：命令行接口，封装开发服务器和构建命令

并行架构

Rspack 充分利用 Rust 的并行能力：

• 模块解析和依赖分析并行执行
• 多核 CPU 利用率最大化
• 增量编译只处理变更模块
• 持久化缓存跨构建复用

增量编译与持久化缓存

// rspack.config.js
export default defineConfig({
  experiments: {
    // Rspack 2.0 中增量编译已默认启用
  },
  cache: {
    type: 'filesystem', // 持久化缓存到磁盘
    buildDependencies: {
      config: ['./rspack.config.js'],
    },
  },
})

• 增量编译：开发模式下仅重新编译变更的模块及其依赖链，HMR 响应通常在 100-200ms
• 持久化缓存：将编译结果缓存到磁盘（node_modules/.cache/rspack/），冷启动时命中缓存可跳过大量重复工作

核心特性

Rust 极致性能

实际项目中，团队普遍报告从 Webpack 迁移后获得 5-10 倍的构建速度提升 和 3 倍的内存节省。

Webpack 生态兼容

Rspack 兼容大部分 Webpack 生态：

• Loader 兼容：支持 babel-loader、postcss-loader、less-loader、sass-loader 等主流 Webpack loader
• Plugin 兼容：支持 HtmlWebpackPlugin、MiniCssExtractPlugin、DefinePlugin、CopyPlugin 等常用插件
• 配置格式兼容：rspack.config.js 的写法与 webpack.config.js 高度一致
• 内置 Loader：builtin:swc-loader（替代 babel-loader + swc-loader）、builtin:lightningcss-loader（替代 postcss-loader）性能更优

内置常用功能

无需额外安装配置，Rspack 开箱即支持：

• CSS 处理：原生 CSS 解析和模块化（type: 'css'）
• 静态资源：Asset modules（asset/resource、asset/inline、asset）
• JSON / TOML / YAML：原生支持
• Tree Shaking：默认启用
• 代码分割：SplitChunksPlugin 内置
• 模块联邦：ModuleFederationPlugin 内置
• HMR：内置热模块替换
• Source Map：多种 devtool 选项

模块联邦（Module Federation）

// 宿主应用 rspack.config.js
import { ModuleFederationPlugin } from '@rspack/core'
 
export default defineConfig({
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
})

Rspack 2.0 对模块联邦进行了显著优化：

• 共享依赖支持导出级别的 Tree Shaking
• 浏览器端运行时修复了 require 注入问题
• 更好的 MF tree shaking，减少冗余代码

React Server Components（实验性）

Rspack 2.0 引入了对 React Server Components 的实验性支持：

• 支持 "use client" 和 "use server" 指令
• 服务端/客户端边界分析
• 多环境编译能力

插件 API

Rspack 兼容 Webpack 的 Tapable 插件系统：

class MyPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
      // 在文件输出前进行处理
      console.log('Emitting files...')
      callback()
    })
 
    compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
      // 访问编译过程
      compilation.hooks.optimizeChunks.tap('MyPlugin', (chunks) => {
        // 自定义 chunk 优化逻辑
      })
    })
  }
}

import.meta 支持（v2.1+）

Rspack 2.1 开始通过 import.meta 暴露更多模块变量，更符合 ESM 规范：

生态图

Rspack 不是一个孤立的工具，它是 Rstack 生态的核心底层：

┌─────────────────────────────────────────────────────┐
│                   Rstack 生态                        │
│                                                     │
│  ┌───────────┐  ┌───────────┐  ┌────────────────┐  │
│  │  Rsbuild   │  │   Rslib   │  │    Rspress     │  │
│  │  上层构建   │  │  库构建    │  │   文档站构建    │  │
│  │  工具       │  │  工具      │  │   工具         │  │
│  └─────┬─────┘  └─────┬─────┘  └───────┬────────┘  │
│        │              │                │            │
│  ┌─────┴──────────────┴────────────────┴────────┐   │
│  │                  Rspack                       │   │
│  │           （核心打包引擎）                      │   │
│  │        Rust 引擎 + Webpack 兼容层              │   │
│  └──────────────────────────────────────────────┘   │
│                                                     │
│  ┌───────────┐  ┌───────────┐  ┌────────────────┐  │
│  │   Rstest   │  │  Rslint   │  │  Agent Skills  │  │
│  │  测试框架   │  │ Lint/类型  │  │  AI 辅助迁移    │  │
│  │            │  │ 检查       │  │               │  │
│  └───────────┘  └───────────┘  └────────────────┘  │
└─────────────────────────────────────────────────────┘

核心生态工具

与 Webpack 生态的关系

Rspack 不是要替代 Webpack 生态，而是用 Rust 重新实现 Webpack 的核心能力：

• 兼容 Webpack 的 loader 协议——大部分 Webpack loader 可直接在 Rspack 中使用
• 兼容 Webpack 的 plugin 系统（Tapable）——常用 Webpack 插件可直接使用
• 兼容 Webpack 的配置格式——迁移成本极低
• 内置替代方案更优——builtin:swc-loader 比 babel-loader 快 20-70 倍

社区插件

Rspack 社区也在发展原生插件生态，部分热门插件：

• @rspack/plugin-html：HTML 模板生成
• @rspack/plugin-react-refresh：React Fast Refresh
• @rspack/plugin-css-extract：CSS 提取
• rspack-plugin-virtual-module：虚拟模块
• rspack-plugin-dynamic-public-path：动态 publicPath

适用场景

大型项目加速

当 Webpack 构建时间成为开发瓶颈时，Rspack 是最直接的加速方案：

• 数百个路由、上千个组件的项目，冷启动从分钟级降到秒级
• HMR 从秒级降到 200ms 以内，显著提升开发体验
• CI/CD 构建时间大幅缩短，降低部署等待

Webpack 项目低成本迁移

Rspack 是 Webpack 项目的最佳渐进式迁移方案：

• 配置文件格式高度兼容，大部分配置可直接复用
• Loader 和 Plugin 大部分可直接使用
• 可以逐模块验证，不需要一次性全量迁移
• 官方提供 Agent 辅助迁移工具：npx skills add rstackjs/agent-skills --skill rspack-v2-upgrade

新项目高性能构建

新项目直接使用 Rspack，从一开始就享受高性能：

• 内置 TypeScript、CSS、静态资源处理，无需繁琐配置
• 内置 SWC 编译器，替代 Babel 获得更快转译速度
• 内置 Lightning CSS，替代 PostCSS 获得更快样式处理

微前端 / 模块联邦

Rspack 对 Module Federation 有深度支持：

• 内置 ModuleFederationPlugin
• 共享依赖的导出级 Tree Shaking
• 运行时性能优化
• 适用于 qiankun、Module Federation 等微前端架构

多框架构建

Rspack 是框架无关的，可以作为各种框架的构建底层：

• React / Vue / Svelte / Solid 等框架均可使用
• Rsbuild 等上层工具提供框架特定的开箱体验
• 支持多环境编译（服务端 + 客户端）

开发与工程化

开发流程

# 启动开发服务器（支持 HMR）
npx rspack serve
 
# 开发模式构建（带 source map）
npx rspack build --mode development
 
# 生产模式构建（优化 + 压缩）
npx rspack build --mode production
 
# 分析构建产物
npx rspack build --analyze

构建部署

// rspack.config.js - 生产环境配置示例
export default defineConfig({
  mode: 'production',
  output: {
    path: './dist',
    filename: '[name].[contenthash:8].js',
    chunkFilename: '[name].[contenthash:8].chunk.js',
    assetModuleFilename: 'assets/[name].[contenthash:8][ext]',
    clean: true,
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
    minimizer: [
      // Rspack 内置 SWC minifier，无需额外配置
    ],
  },
  performance: {
    maxAssetSize: 250000,
    maxEntrypointSize: 250000,
  },
})

CI/CD 集成

Rspack 与主流 CI/CD 平台无缝集成：

# GitHub Actions 示例
- name: Build with Rspack
  run: |
    pnpm install --frozen-lockfile
    pnpm rspack build --mode production
 
# 缓存优化（利用持久化缓存）
- name: Cache Rspack
  uses: actions/cache@v4
  with:
    path: node_modules/.cache/rspack
    key: rspack-cache-${{ hashFiles('pnpm-lock.yaml') }}

Monorepo 支持

Rspack 天然支持 Monorepo 工作区：

• 配合 pnpm workspace / Turborepo / Nx 使用
• resolve.alias 或 resolve.modules 配置 monorepo 内部包路径
• 持久化缓存跨包共享
• Rsbuild 提供 workspace 级别的统一配置

性能与安全

Rust 性能优势

Rspack 的性能优势来源于 Rust 语言的底层能力：

• 零成本抽象：Rust 的抽象不会带来运行时开销
• 内存安全：无 GC 暂停，构建过程稳定流畅
• 并行计算：Rust 的所有权模型使得安全的多线程并行成为可能
• 增量编译：精确的依赖追踪，只重编译变更部分
• 持久化缓存：序列化到磁盘，跨构建复用

缓存策略

export default defineConfig({
  cache: {
    type: 'filesystem',
    // 缓存目录
    cacheDirectory: './node_modules/.cache/rspack',
    // 构建依赖——配置变更时自动失效缓存
    buildDependencies: {
      config: ['./rspack.config.js'],
      lockfile: ['./pnpm-lock.yaml'],
    },
  },
})

Rspack 2.0 的缓存性能相比 1.0 提升显著：

• 有缓存的生产构建：2.2s（1.7）→ 1.4s（2.0）
• 缓存命中率优化，减少缓存失效场景

Tree Shaking

Rspack 2.0 增强了 Tree Shaking 能力：

• 支持 CommonJS require 解构和属性访问的静态分析
• 支持 #__NO_SIDE_EFFECTS__ 编译器注解标记纯函数
• Module Federation 共享模块的导出级裁剪
• 更精确的副作用（sideEffects）分析

代码分割

export default defineConfig({
  optimization: {
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: 30,
      maxAsyncRequests: 30,
      minSize: 10000,
      enforceSizeThreshold: 50000, // Rspack 2.0 新增
      cacheGroups: {
        framework: {
          test: /[\\/]node_modules[\\/](react|react-dom|react-router)[\\/]/,
          name: 'framework',
          priority: 40,
        },
        common: {
          minChunks: 2,
          priority: 20,
          reuseExistingChunk: true,
        },
      },
    },
  },
})

安全特性

• 依赖最小化：2.0 大幅精简依赖树（@rspack/core 从 8 个依赖降至 1 个）
• 供应链安全：更少的依赖意味着更小的攻击面
• Subresource Integrity (SRI) 支持
• import.meta.rspackNonce 支持 CSP nonce

技术对比

Rspack vs Webpack vs Vite vs Turbopack vs Farm

选型建议

• 从 Webpack 迁移 → 选 Rspack，迁移成本最低，性能提升最大
• 纯 Next.js 项目且追求极致 HMR → 选 Turbopack（但无法脱离 Next.js）
• 新项目、多框架需求、追求均衡 → 选 Vite 8（生态最广泛）
• 超大型 Webpack 项目的渐进式迁移 → 选 Rspack（唯一可行的高性能渐进方案）
• 实验性/学习目的 → 选 Farm（Rust 社区驱动）

最佳实践

生产环境配置清单

1. 启用持久化缓存：cache.type: 'filesystem'，显著加速二次构建
2. 使用内置 Loader：builtin:swc-loader 替代 babel-loader，type: 'css' 替代 css-loader
3. 合理配置 splitChunks：将 vendor 代码单独分包，利用浏览器缓存
4. 启用 Source Map：生产环境使用 devtool: 'source-map' 或 'hidden-source-map'
5. 配置 performance hints：设置 performance.maxAssetSize 发现过大的产物
6. 使用 contenthash：输出文件名包含 contenthash，优化 CDN 缓存策略
7. 启用压缩：Rspack 内置 SWC Minifier，生产模式自动启用

Webpack 迁移指南

第一步：替换打包器

# 安装 Rspack
pnpm add -D @rspack/core @rspack/cli
 
# 可选：卸载 webpack（建议先保留验证）
# pnpm remove webpack webpack-cli webpack-dev-server

第二步：复制/适配配置

# 将 webpack.config.js 复制为 rspack.config.js
cp webpack.config.js rspack.config.js

大部分配置可直接复用，需要注意的差异：

• babel-loader → 推荐替换为 builtin:swc-loader（性能更优）
• css-loader + style-loader → 使用 type: 'css'（内置）
• mini-css-extract-plugin → 使用 @rspack/plugin-css-extract
• 部分不兼容的插件需要查找 Rspack 替代方案

第三步：验证与调试

# 使用 Rspack 构建，对比产物
npx rspack build --mode production
 
# 检查是否有不兼容的 loader/plugin
npx rspack build 2>&1 | grep "not supported"

第四步：Agent 辅助迁移（可选）

# 安装官方迁移 Skill
npx skills add rstackjs/agent-skills --skill rspack-v2-upgrade

性能调优

1. 分析构建耗时：使用 --profile 和 --analyze 找出瓶颈
2. 减少 loader 处理范围：配置 include/exclude 精确控制 loader 作用域
3. 利用持久化缓存：确保 buildDependencies 配置正确
4. 合理使用 externals：将不需要打包的大型依赖标记为外部
5. 按需引入：配合 Tree Shaking 使用 ESM 导入
6. 避免过大的单文件：配置 splitChunks 合理拆分

技术局限与边界

与 Webpack 的兼容性差异

虽然 Rspack 以兼容 Webpack 为核心目标，但并非 100% 兼容：

• 部分冷门 Loader 不支持：一些深度依赖 Webpack 内部 API 的 loader 可能无法直接使用
• 部分 Plugin 不兼容：依赖 Webpack 特定内部实现细节的插件需要适配
• 配置差异：少数配置项的行为有细微差别，需要逐一验证
• Node.js 版本：Rspack 2.0 要求 Node.js >= 18，部分旧环境可能需要升级

生态成熟度

• Rspack 原生插件生态不如 Webpack 丰富（但兼容大部分 Webpack 插件）
• 社区规模相比 Webpack 仍然较小
• 中文文档较完善（字节跳动背景），但英文社区资源在增长中
• 框架集成方面，Rsbuild 的成熟度还在追赶 Vite/CRA 等老牌工具

已知限制

• React Server Components 仍为实验性，不建议在生产环境使用
• 纯 ESM 包：2.0 的核心包不再提供 CJS 构建，某些依赖 CJS 的场景可能需要注意
• Turbopack 般的 HMR 速度：HMR 虽快但不及 Turbopack（160ms vs 70ms）
• 部分 advanced API：Webpack 的某些底层 API（如 compiler.parser 的完整 hook 集合）兼容性仍在完善中

不适合的场景

• 需要 100% Webpack 兼容且无法接受任何差异的遗留项目
• 深度绑定 Webpack 内部 API 的自定义构建流程
• 对 HMR 有极致要求且使用 Next.js 的项目（Turbopack 更优）

学习资源

官方资源

• Rspack 官方文档：快速入门、配置参考、API 文档
• Rspack Blog：版本发布公告、技术文章
• Rspack GitHub：源码、Issue、Release Notes
• Rspack Roadmap：未来规划
• Rspack 迁移指南：从 Webpack 迁移的详细步骤

生态工具文档

• Rsbuild 文档：上层构建工具
• Rslib 文档：库构建工具
• Rspress 文档：文档站工具

社区资源

• Rspack 中文文档（旧域名，重定向到 rspack.rs）
• 掘金 Rspack 相关文章
• 9x Faster, 3x Less Memory: Webpack to Rspack Migration
• Vite vs Turbopack vs Rspack Benchmark 2026
• InfoQ: Rspack 1.7 发布报道

Agent 辅助工具

# Rspack 2.0 升级 Skill（用于 Coding Agent）
npx skills add rstackjs/agent-skills --skill rspack-v2-upgrade

2026 年现状

版本演进

发展趋势

1. 输出优化持续推进：Tree Shaking、代码分割、静态分析能力不断增强，计划引入静态类型信息辅助优化
2. Agent 友好：为 AI 编程助手提供更丰富的调试信息和机器可读的诊断输出
3. 现代标准：持续支持 import.meta、import defer 等现代 JavaScript 特性
4. RSC 和多环境：在实验性 React Server Components 基础上，向稳定的多环境编译能力演进
5. 工具链协作：探索基于 tsgo 的 Rslint 类型检查，进一步统一 Rust 工具链

社区活跃度

• GitHub Stars 30k+，贡献者持续增长
• 字节跳动内部大规模使用，保证了项目的长期投入
• Rstack 生态（Rsbuild、Rslib、Rspress）协同发展，形成完整的 Rust 前端工具链
• 1.x 版本将继续维护，支持关键问题修复和迁移过渡

与 Webpack 生态的关系

Rspack 与 Webpack 的关系正在从"兼容替代"向"演进升级"转变：

• 1.x 阶段以最大程度兼容 Webpack 为目标
• 2.0 开始引入 Webpack 没有的现代特性（import.meta 变量、纯 ESM 输出等）
• Webpack 本身仍在积极开发，两者在可预见的未来将共存
• 对于新项目，Rspack 正成为比 Webpack 更推荐的默认选择

总结：Rspack 是 2026 年最成熟的 Webpack 高性能替代方案。凭借 Rust 实现的极致性能、与 Webpack 生态的高度兼容性、以及 Rstack 工具链的协同发展，Rspack 尤其适合大型项目的构建加速和 Webpack 项目的渐进式迁移。随着 2.0 的发布，Rspack 正在从"兼容替代"走向"超越进化"，成为新一代前端构建工具的重要选择。