Rspack 2.0 深度拆解：字节跳动如何用 Rust 把 Webpack 的 192 个依赖砍到 1 个——从 ESM 核心到 React Server Components 的前端构建革命

一、引言：前端构建工具的「三国杀」进入 2.0 时代

2026 年 7 月 29 日，字节跳动开源的 Rust 打包工具 Rspack 正式发布 2.0 版本。这不是一次常规的版本迭代——它标志着前端构建工具格局的一次深层变革。

如果你还在用 Webpack，你大概率经历过这样的场景：npm install 跑了两分钟，node_modules 占了 800MB，webpack-dev-server 启动要等 30 秒，HMR 点了保存等两秒才刷出来。这些问题在 Rspack 2.0 中被系统性地解决了。

更关键的是，Rspack 2.0 做了一件让 Hacker News 上的工程师们拍手叫好的事：把 @rspack/dev-server 的依赖项从 192 个砍到了 1 个。这不是性能优化，这是供应链安全的范式转变。

在 Rspack 2.0 发布之前，前端构建工具已经形成了三足鼎立的格局：

• Vite + Rolldown：以开发体验为核心，Rolldown 用 Rust 重写 Rollup，单核统一打包
• Turbopack：Vercel 的 Rust 打包器，深度绑定 Next.js 生态
• Rspack：字节跳动出品，以 Webpack 兼容性为核心卖点

Rspack 2.0 的发布，让这场「三国杀」的天平发生了微妙的倾斜。

二、架构深度：从 1.x 到 2.0 的底层变革

2.1 ESM 核心：告别 CommonJS 的历史包袱

Rspack 2.0 最底层的变革是将 @rspack/core 从 CommonJS 包切换为纯 ESM 包。这听起来像是一个不起眼的改动，但实际上它涉及整个模块系统的重新设计。

在 1.x 时代，Rspack 的核心包同时维护 CJS 和 ESM 两个入口，这意味着：

// 1.x 时代 —— CJS 和 ESM 双入口
const rspack = require('@rspack/core');  // CJS
import { rspack } from '@rspack/core';   // ESM
// 两个入口背后是两套构建产物，维护成本翻倍

2.0 直接删除了 CJS 构建产物：

// 2.0 —— 纯 ESM
import { rspack } from '@rspack/core';
// 只有一套入口，包体积更小，加载更快

// Node.js v20.19+ 的 require() 也能加载 ESM
const rspack = require('@rspack/core');  // ✅ 仍然可用
// 因为 Node.js v20.19+ 支持 require() 加载 ESM 模块

这个决策背后有一个重要的前提条件：Node.js v20.19 及更高版本可以通过 require() 加载 ESM 模块。这意味着大多数使用 JavaScript API 的项目不需要修改任何代码就能无缝升级。

2.2 SWC 引擎的持续进化

Rspack 的核心编译能力来自 SWC（Speedy Web Compiler），这是一个用 Rust 编写的超快 JavaScript/TypeScript 编译器。在 2.0 中，SWC 的缓存机制得到了显著增强。

SWC 压缩器缓存复用是 2.0 的一大亮点。在生产构建中，SWC 的压缩器现在可以复用之前构建的缓存结果：

// rspack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    // 2.0 新增：SWC 压缩器缓存配置
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin({
        // 启用缓存复用，命中时性能提升约 50%
        cache: {
          type: 'filesystem',
          cacheDirectory: '.rspack_cache',
          // 缓存有效期
          maxAge: 7 * 24 * 60 * 60 * 1000, // 7 天
        },
      }),
    ],
  },
};

2.3 依赖项砍到 1 个：供应链安全的范式转变

这是 Rspack 2.0 最让社区兴奋的改进。在 Hacker News 上，有评论者写道：

"与性能数据相比，依赖项减少的数字更让我印象深刻。这是一种理念的转变，而不仅仅是基准测试。在现阶段采取了比大多数打包工具更强硬的供应链立场。"

让我们看看具体数据：

依赖项从 192 个减少到 1 个意味着什么？

1. 供应链攻击面大幅缩小：192 个依赖包中任何一个被植入恶意代码都可能影响你的构建流程，1 个依赖则将攻击面压缩到极致
2. 安装速度提升：npm install 不再需要解析和下载 192 个包的依赖树
3. 磁盘占用减少：node_modules 目录更小，CI/CD 流水线更快
4. 许可证审计简化：从审计 192 个包的许可证变为审计 1 个

# 对比安装体验
# Rspack 1.x
$ npm install @rspack/core @rspack/cli @rspack/dev-server
added 192 packages in 45s

# Rspack 2.0
$ npm install @rspack/core@2 @rspack/cli@2 @rspack/dev-server@2
added 1 packages in 3s

三、性能基准：从 5.6 秒到 1.4 秒的进化

3.1 大型项目构建性能

Rspack 2.0 提供了一个非常有说服力的基准测试：一个包含 10,000 个 React 组件的项目。

// 基准测试配置示例
// rspack.config.js
module.exports = {
  mode: 'production',
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
  },
  cache: {
    type: 'filesystem',
    // 2.0 的持久化缓存策略
    buildDependencies: {
      config: [__filename],
    },
    cacheDirectory: path.resolve(__dirname, '.rspack_cache'),
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: 20,
      maxAsyncRequests: 20,
    },
  },
  // 启用 SWC 缓存复用
  experiments: {
    swcCache: true,
  },
};

3.2 内存优化

2.0 在内存管理上也做了显著改进。启用缓存后，内存占用量减少了超过 20%：

// 内存优化配置
module.exports = {
  // 启用内存优化
  optimization: {
    // 减少内存占用的代码分割策略
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          // 限制并行加载的 chunk 数量，减少内存峰值
          maxInitialRequests: 25,
        },
      },
    },
  },
  // 2.0 新增：内存使用限制
  performance: {
    maxAssetSize: 512 * 1024, // 512KB
    maxEntrypointSize: 512 * 1024,
  },
};

3.3 与竞品的性能对比

将 Rspack 2.0 与当前市场上的其他打包工具进行对比：

注意最后一列——Rspack 2.0 保持了与 Webpack 约 95% 的配置兼容性，这是它相对于 Vite 和 Turbopack 最大的差异化优势。

四、React Server Components 支持：全栈开发的新篇章

4.1 什么是 React Server Components

React Server Components（RSC）是 React 19 引入的核心特性，它允许组件在服务端渲染并直接访问数据库、文件系统等后端资源，而不需要通过 API 层。在 Rspack 2.0 中，这是实验性支持。

4.2 Rspack 2.0 的 RSC 实现

// rspack.config.js - 启用 React Server Components
module.exports = {
  experiments: {
    // 实验性：React Server Components 支持
    react: {
      serverComponents: true,
    },
  },
  // RSC 的路由配置
  entry: {
    // 服务端入口
    server: {
      import: './src/server.tsx',
      layer: 'server',
    },
    // 客户端入口
    client: {
      import: './src/client.tsx',
      layer: 'client',
    },
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
  },
  module: {
    rules: [
      {
        // 服务端组件规则
        test: /\.tsx?$/,
        resourceQuery: /server/,
        type: 'javascript/auto',
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
              },
            },
          },
        },
      },
      {
        // 客户端组件规则
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
              },
            },
          },
        },
      },
    ],
  },
};

4.3 Server Component 示例

// src/components/UserList.tsx (Server Component)
// 这个组件在服务端运行，可以直接访问数据库
import { db } from '../lib/database';

export default async function UserList() {
  // 直接查询数据库，无需 API 层
  const users = await db.user.findMany({
    select: {
      id: true,
      name: true,
      email: true,
      avatar: true,
    },
    orderBy: { createdAt: 'desc' },
    take: 20,
  });

  return (
    <div className="user-list">
      <h2>最新注册用户</h2>
      {users.map((user) => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

// src/components/UserCard.tsx (Client Component)
'use client';

import { useState } from 'react';

export default function UserCard({ user }: { user: any }) {
  const [expanded, setExpanded] = useState(false);

  return (
    <div
      className="user-card"
      onClick={() => setExpanded(!expanded)}
    >
      <img src={user.avatar} alt={user.name} />
      <div>
        <h3>{user.name}</h3>
        <p>{user.email}</p>
      </div>
      {expanded && (
        <div className="user-details">
          <p>详细信息加载中...</p>
        </div>
      )}
    </div>
  );
}

4.4 RSC 的性能优势

在 Rspack 2.0 的基准测试中，启用 RSC 后的性能表现：

RSC 的核心优势在于：服务端组件的代码不会被打包到客户端 Bundle 中，这直接减少了客户端需要下载和解析的 JavaScript 量。

五、ESM 生态的全面拥抱

5.1 import.meta 支持

Rspack 2.0 新增了对 import.meta 的支持，这是 ES Module 的标准元数据对象：

// 在模块中使用 import.meta
console.log('当前模块 URL:', import.meta.url);
console.log('当前目录:', new URL('.', import.meta.url).pathname);

// 动态导入时使用 import.meta
const module = await import(new URL('./utils.js', import.meta.url).href);

// 在 SWC 配置中启用
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'ecmascript',
              },
              // 启用 import.meta 支持
              transform: {
                treatHelpersAsUndefined: false,
              },
            },
          },
        },
      },
    ],
  },
};

5.2 import defer 提案支持

import defer 是 Stage-3 的 ECMAScript 提案，允许延迟模块的求值：

// import defer 示例
import defer './heavy-module.js';

// heavy-module.js 不会在 import 时立即执行
// 只有在实际使用导出值时才会执行
console.log('模块尚未加载');

// 当访问导出值时，模块才会被加载和执行
if (needsHeavyModule) {
  const result = await import('./heavy-module.js');
  // 此时模块才会真正执行
}

5.3 增强的 Tree Shaking

Rspack 2.0 在生产环境中默认启用了无副作用函数分析：

// rspack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
    sideEffects: true, // 2.0 默认启用
    // 新增：无副作用函数分析
    innerGraph: true,
  },
  // package.json 中的 sideEffects 声明会被自动识别
};

// package.json - 配合 sideEffects 声明
{
  "name": "my-library",
  "sideEffects": [
    "*.css",
    "*.scss",
    "./src/polyfills.js",
    "./src/global-styles.js"
  ]
}

这意味着未使用的导出会被更彻底地移除，Bundle 体积进一步缩小。

六、从 Webpack 迁移到 Rspack 2.0

6.1 配置兼容性

Rspack 2.0 保持了与 Webpack 约 95% 的配置兼容性。大多数 Webpack 配置只需要最小的修改：

// webpack.config.js → rspack.config.js 的迁移示例

// Webpack 配置（迁移前）
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.[contenthash].js',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new MiniCssExtractPlugin(),
  ],
  devServer: {
    port: 3000,
    hot: true,
  },
};

// rspack.config.js（迁移后）
const { rspack } = require('@rspack/core');

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.[contenthash].js',
  },
  module: {
    rules: [
      // 用 SWC 替代 ts-loader，性能提升 10x
      {
        test: /\.tsx?$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
              },
              transform: {
                react: {
                  runtime: 'automatic',
                },
              },
            },
          },
        },
        exclude: /node_modules/,
      },
      // Rspack 内置 CSS 支持
      {
        test: /\.css$/,
        type: 'css',
      },
    ],
  },
  plugins: [
    // Rspack 内置 HTML 插件
    new rspack.HtmlRspackPlugin({ template: './src/index.html' }),
    // 内置 CSS 提取
    new rspack.CssExtractRspackPlugin(),
  ],
  devServer: {
    port: 3000,
    hot: true,
    // 2.0：更高效的 HMR 实现
    hotUpdate: {
      // 增量更新，只更新变化的模块
      overlay: false,
    },
  },
};

6.2 从 Rspack 1.x 升级到 2.0

# 升级步骤
# 1. 更新 Node.js 到 20.19+ 或 22.12+
node --version  # 确认版本

# 2. 更新依赖
npm install @rspack/core@^2.0.0 @rspack/cli@^2.0.0 \
  @rspack/dev-server@^2.0.0 @rspack/plugin-react-refresh@^2.0.0

# 3. 检查废弃的 API
# module.unsafeCache 已移除，需要删除相关配置

// 1.x 配置中需要移除的内容
module.exports = {
  // ❌ 已移除
  // cache: {
  //   unsafeCache: true,
  // },

  // ✅ 替代方案
  cache: {
    type: 'filesystem',
    cacheDirectory: '.rspack_cache',
  },
};

七、与 Vite + Rolldown 和 Turbopack 的深度对比

7.1 设计哲学差异

Vite + Rolldown 的核心理念是「开发体验优先」。Vite 的开发服务器利用浏览器原生 ESM，实现了近乎即时的 HMR。Rolldown 作为 Rollup 的 Rust 重写，专注于生产构建的统一。

Turbopack 的核心理念是「增量计算」。它将构建过程建模为一个计算图，只有变化的部分会被重新计算。Turbopack 与 Next.js 深度绑定，是 Vercel 的战略产品。

Rspack 2.0 的核心理念是「渐进式迁移」。它不试图重新发明构建流程，而是用 Rust 替换 Webpack 的 JavaScript 核心，同时保持 95% 的配置兼容性。这让数百万 Webpack 用户可以无缝迁移。

7.2 迁移成本对比

7.3 实际项目迁移案例

# 从 Webpack 迁移到 Rspack 2.0 的实际操作
# 以一个 React + TypeScript 项目为例

# 1. 安装 Rspack
npm uninstall webpack webpack-cli webpack-dev-server \
  ts-loader css-loader style-loader mini-css-extract-plugin \
  html-webpack-plugin

npm install @rspack/core@^2.0.0 @rspack/cli@^2.0.0 \
  @rspack/dev-server@^2.0.0 @rspack/plugin-react-refresh@^2.0.0

# 2. 创建 rspack.config.js（基于现有 webpack.config.js 修改）
# 参考上面的迁移示例

# 3. 更新 package.json scripts
# "dev": "webpack serve" → "dev": "rspack serve"
# "build": "webpack --mode production" → "build": "rspack build --mode production"

# 4. 测试构建
npm run build
npm run dev

八、生产环境实战：完整配置示例

8.1 React + TypeScript 项目完整配置

// rspack.config.js - 生产级配置
const path = require('path');
const { rspack } = require('@rspack/core');

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';

  return {
    mode: isProduction ? 'production' : 'development',
    entry: './src/index.tsx',

    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: isProduction
        ? '[name].[contenthash:8].js'
        : '[name].js',
      chunkFilename: isProduction
        ? '[name].[contenthash:8].chunk.js'
        : '[name].chunk.js',
      publicPath: '/',
      clean: true,
    },

    resolve: {
      extensions: ['.tsx', '.ts', '.js', '.jsx'],
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },

    module: {
      rules: [
        // TypeScript + JSX
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'builtin:swc-loader',
            options: {
              jsc: {
                parser: {
                  syntax: 'typescript',
                  tsx: true,
                },
                transform: {
                  react: {
                    runtime: 'automatic',
                    development: !isProduction,
                    refresh: !isProduction,
                  },
                },
                target: 'es2022',
              },
            },
          },
        },

        // CSS
        {
          test: /\.css$/,
          type: 'css',
        },

        // 图片
        {
          test: /\.(png|jpe?g|gif|webp|avif)$/i,
          type: 'asset',
          parser: {
            dataUrlCondition: {
              maxSize: 10 * 1024, // 10KB
            },
          },
        },

        // 字体
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/i,
          type: 'asset/resource',
          generator: {
            filename: 'fonts/[name].[hash:8][ext]',
          },
        },
      ],
    },

    plugins: [
      new rspack.HtmlRspackPlugin({
        template: './public/index.html',
        minify: isProduction,
      }),

      // React Refresh（开发模式）
      !isProduction &&
        new rspack.ReactRefreshRspackPlugin(),

      // CSS 提取（生产模式）
      isProduction &&
        new rspack.CssExtractRspackPlugin({
          filename: 'css/[name].[contenthash:8].css',
        }),
    ].filter(Boolean),

    optimization: {
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: 20,
        maxAsyncRequests: 20,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            priority: 10,
            chunks: 'all',
          },
          common: {
            minChunks: 2,
            priority: 5,
            reuseExistingChunk: true,
          },
        },
      },
      runtimeChunk: 'single',
      sideEffects: true,
      usedExports: true,
    },

    cache: {
      type: 'filesystem',
      cacheDirectory: path.resolve(__dirname, '.rspack_cache'),
      buildDependencies: {
        config: [__filename],
      },
    },

    devServer: {
      port: 3000,
      hot: true,
      historyApiFallback: true,
      proxy: {
        '/api': {
          target: 'http://localhost:8080',
          changeOrigin: true,
        },
      },
    },

    // 实验性特性
    experiments: {
      // React Server Components（实验性）
      // react: { serverComponents: true },
    },
  };
};

8.2 Monorepo 配置

// monorepo/rspack.config.base.js
const { rspack } = require('@rspack/core');

module.exports = {
  // 共享的 SWC 配置
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
              },
            },
          },
        },
      },
    ],
  },

  // 共享的缓存配置
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, '.rspack_cache'),
  },

  // 共享的优化配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: 20,
    },
  },
};

// monorepo/packages/web/rspack.config.js
const baseConfig = require('../../rspack.config.base');

module.exports = {
  ...baseConfig,
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
  },
};

九、性能调优实战指南

9.1 持久化缓存的最佳实践

// 高级缓存配置
module.exports = {
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, '.rspack_cache'),

    // 构建依赖追踪
    buildDependencies: {
      config: [
        __filename,
        // 包含所有可能影响构建的配置文件
        path.resolve(__dirname, 'tsconfig.json'),
        path.resolve(__dirname, '.babelrc'),
      ],
      // 包含所有加载器的配置
      defaultWebpack: [],
    },

    // 缓存版本控制
    version: '1.0.0',

    // 缓存过期策略
    maxAge: 1000 * 60 * 60 * 24 * 7, // 7 天

    // 缓存压缩
    compression: 'gzip',

    // 只在生产模式启用持久化缓存
    // 开发模式可以使用内存缓存以获得更快的构建速度
  },
};

9.2 SWC 缓存复用优化

// 启用 SWC 缓存复用
module.exports = {
  experiments: {
    swcCache: true,
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tx: true,
              },
              // 缓存编译结果
              cache: {
                type: 'filesystem',
                cacheDirectory: '.swc_cache',
              },
            },
          },
        },
      },
    ],
  },
};

9.3 内存优化策略

// 大型项目的内存优化
module.exports = {
  optimization: {
    // 限制 chunk 数量
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: 20,
      maxAsyncRequests: 20,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          // 限制单个 chunk 的大小
          maxSize: 250 * 1024, // 250KB
        },
      },
    },

    // 运行时 chunk 分离
    runtimeChunk: 'single',
  },

  // 限制并行处理数量
  parallelism: 4, // 根据 CPU 核心数调整

  // 性能提示
  performance: {
    maxAssetSize: 512 * 1024, // 512KB
    maxEntrypointSize: 512 * 1024,
    hints: isProduction ? 'warning' : false,
  },
};

十、CI/CD 集成最佳实践

10.1 GitHub Actions 配置

# .github/workflows/build.yml
name: Build and Test

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22.12'

      - name: Install dependencies
        run: npm ci

      - name: Cache Rspack
        uses: actions/cache@v4
        with:
          path: |
            .rspack_cache
            .swc_cache
          key: rspack-${{ runner.os }}-${{ hashFiles('**/rspack.config.js') }}
          restore-keys: |
            rspack-${{ runner.os }}-

      - name: Build
        run: npm run build

      - name: Upload build artifacts
        uses: actions/upload-artifact@v4
        with:
          name: dist
          path: dist/

10.2 Docker 构建优化

# Dockerfile
FROM node:22.12-alpine AS builder

WORKDIR /app

# 复制依赖文件
COPY package.json package-lock.json ./

# 安装依赖
RUN npm ci

# 复制源码
COPY . .

# 构建
RUN npm run build

# 生产镜像
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80

十一、社区反响与生态展望

11.1 社区评价

Hacker News 上的讨论非常积极：

"依赖项从 192 个减少到 1 个，这比任何性能基准测试都更有说服力。这是供应链安全的范式转变。"

"Rspack 正逐渐成为 Webpack 的一个非常可靠的替代方案。很高兴看到 2.0 版本带着这些改进问世。"

Reddit 上 r/rust 版块的一位用户指出：

"作为一名完全采用 Rolldown 栈的用户，只有当 Rspack 能提供更强的性能和更完善的生态系统时，我才会考虑切换。"

11.2 生态系统增长

Rspack 的每周 npm 下载量从 1.0 版本发布时的约 10 万次攀升至超过 500 万次，增长了 50 倍。这说明越来越多的团队正在从 Webpack 迁移到 Rspack。

11.3 未来路线图

根据 Rspack 团队的规划，未来的重点方向包括：

1. React Server Components 的稳定版：从实验性支持升级为正式特性
2. 更广泛的插件兼容性：从 80% 提升到 95%+ 的 Webpack 插件兼容
3. Monorepo 支持增强：更好的工作区管理和增量构建
4. SWC 4.0 集成：更强大的编译能力和更小的二进制体积
5. Rust 生态深度整合：与 Tokio 异步运行时的更紧密集成

十二、总结：Rspack 2.0 意味着什么

Rspack 2.0 的发布不仅仅是一个工具的升级，它代表了前端构建工具发展的一个重要方向：用系统级语言重写核心，同时保持渐进式迁移的路径。

对于 Webpack 用户来说，Rspack 2.0 提供了一个几乎无痛的迁移方案——你不需要重写配置，不需要学习新的 API，不需要更换插件生态，就能获得 2-5 倍的性能提升。

对于新项目来说，Rspack 2.0 提供了一个值得考虑的选择——它比 Vite 更简单（不需要理解 ESM 和 CJS 的区别），比 Turbopack 更开放（不绑定特定框架），比 Webpack 更快（Rust 编写的核心）。

最重要的是，依赖项从 192 个减少到 1 个，这一举措不仅仅是数字上的优化，更是一种工程哲学的表达：在供应链安全日益重要的今天，减少依赖就是减少风险。

2026 年的前端构建工具格局已经不是「谁更快」的问题，而是「谁更安全、谁更好迁移、谁更可持续」。Rspack 2.0 在这三个维度上都给出了有力的回答。

参考资源：

• Rspack 官方文档：https://rspack.dev
• Rspack 2.0 发布博客：https://www.infoq.com/news/2026/07/rspack-2-release/
• Rspack GitHub 仓库：https://github.com/web-infra-dev/rspack
• SWC 项目：https://swc.rs
• Webpack 迁移指南：https://rspack.dev/misc/migration/webpack