跳到主要内容

Rspack

Rspack 是一个 Rust 实现的 bundler，设计上和 Webpack 生态关系很深，但目标是把性能和现代化体验往前拉一大截。

Rspack 和 Rsbuild 的关系​

  • Rspack：更底层的 bundler
  • Rsbuild：更面向项目的构建方案

把两者放在一起看会更容易理解。很多团队最终直接接触的是 Rsbuild，而不是裸用 Rspack。

一个最常见的配置形态​

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: __dirname + '/dist',
    filename: '[name].[contenthash].js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'builtin:swc-loader',
        exclude: /node_modules/,
      },
    ],
  },
}

一个更进阶的配置参考​

const path = require('path')
const { HtmlRspackPlugin } = require('@rspack/core')

module.exports = {
  mode: 'production',
  entry: {
    main: './src/main.tsx',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].[contenthash:8].js',
    publicPath: '/',
    clean: true,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
    extensions: ['.ts', '.tsx', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        use: 'builtin:swc-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        type: 'css',
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset',
      },
    ],
  },
  plugins: [
    new HtmlRspackPlugin({
      template: './public/index.html',
    }),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
}

为什么它值得单独学​

Rspack 代表的是现代前端构建里非常明确的一条路线：保留成熟 bundler 生态的组织方式，同时用更高性能的底层重新实现。

前端集成时最值得关注的点​

1. 历史 Webpack 项目迁移​

这一类项目往往是最自然的候选：

  • loader / plugin 组织方式熟悉
  • 构建心智延续性强
  • 迁移成本通常比直接改到另一套工具更可控

2. React 或后台系统项目​

如果项目本来就是重工程、重约定、重构建定制，Rspack 路线通常会比“从头换一整套轻量工具”更自然。

3. 与 SWC 的结合​

Rspack 常见的一条路线就是把编译层和 bundler 层都往更快的底层能力上收。

使用时的现实判断​

如果目标是“今天就做项目”，多数团队会更优先接触 Rsbuild。如果目标是“理解底层 bundler 怎么组织、或者迁移复杂 Webpack 工程”，Rspack 更值得直接看。