Rspack 0.4 和 Rsbuild 0.1 发布公告

2023 年 11 月 22 日

Rsbuild v0.1 发布

我们很高兴地宣布 Rsbuild v0.1 的发布!

Rsbuild 是基于 Rspack 的构建工具,旨在成为增强版的 Rspack CLI,更加容易上手和开箱即用。Rsbuild 是 Webpack 应用迁移到 Rspack 的最佳方案,他能帮助你减少 90% 配置并获得 10 倍构建速度。

🚀 性能

Rsbuild 的构建性能与原生 Rspack 处于同一水平。由于 Rsbuild 内置了更多开箱即用的功能,因此性能数据会略微低于 Rspack。

以下是构建 1000 个 React 组件的时间:

以上数据基于 Farm 团队搭建的 benchmark,更多信息请参考 performance-compare

🔥 特性

Rsbuild 具备以下特性:

  • 易于配置:Rsbuild 的目标之一,是为 Rspack 用户提供开箱即用的构建能力,使开发者能够在零配置的情况下开发 web 项目。同时,Rsbuild 提供一套语义化的构建配置,以降低 Rspack 配置的学习成本。

  • 性能优先:Rsbuild 集成了社区中基于 Rust 的高性能工具,包括 RspackSWC,以提供一流的构建速度和开发体验。与基于 Webpack 的 Create React App 和 Vue CLI 等工具相比,Rsbuild 提供了 5 ~ 10 倍的构建性能,以及更轻量的依赖体积。

  • 插件生态:Rsbuild 内置一个轻量级的插件系统,提供一系列高质量的官方插件。此外,Rsbuild 兼容大部分的 webpack 插件和所有的 Rspack 插件,这意味着你可以在 Rsbuild 中使用社区或公司内沉淀的现有插件,而不需要重写相关代码。

  • 产物稳定:Rsbuild 设计时充分考虑了构建产物的稳定性,它的开发环境产物和生产构建产物具备较高的一致性,并自动完成语法降级和 polyfill 注入。Rsbuild 也提供插件来进行 TypeScript 类型检查和产物语法检查,以避免线上代码的质量问题和兼容性问题。

  • 框架无关:Rsbuild 不与前端 UI 框架耦合,并通过插件来支持 React、Vue 3、Vue 2、Svelte、Solid、Lit 等框架,未来也计划支持社区中更多的 UI 框架。

💡 下一步

目前 Rsbuild 仍在快速迭代中,并计划引入更多强大的新特性。

比如,我们正在开发 Rsdoctor,这是一个强大的构建分析工具,可以用于所有 Rspack 和 Webpack 项目。它提供可视化 UI,来帮助开发者分析项目中的构建耗时、重复依赖、代码转换过程等,使构建问题更加容易被定位和解决。

Rsdoctor preview

我们将在近期发布 Rsdoctor 的第一个可用版本,后续 Rsbuild 会与 Rspack 同步迭代,并计划于 2024 年上半年发布 1.0 版本。

欢迎查看 Rsbuild 仓库 以了解更多 🙌。

Rspack 0.4 主要变动

停止支持 Node.js 14

Rspack 不再支持 Node.js 14,现在需要 Node.js 16+。

调整 @rspack/core 为 @rspack/cli 的 peer dependency

@rspack/core 现在是 @rspack/cli 的 peerDependency,而不是直接的依赖关系。这意味着现在您需要手动安装 @rspack/core@rspack/cli。这使得 Rspack 更加接近 webpack。从长远来看,@rspack/cli 的定位将不再是开箱即用的解决方案。我们建议使用 Rsbuild 作为开箱即用的解决方案。

废弃默认转换

experiments.rspackFuture.disableTransformByDefault 在 v0.4.0 中默认启用。对于仍需要旧行为的用户,可以手动将此选项设置为 false

此功能主要解决三类问题:内置 代码转换功能,目标,和自定义 Rule.type

  1. 移除对一些 内置 功能的支持:
module.exports = {
  module: {
    rules: [
      {
        test: /.jsx$/,
        loader: 'builtin:swc-loader',
        options: {
          jsc: {
            parser: {
              syntax: 'ecmascript',
              jsx: true,
            },
            transform: {
              react: {
                runtime: 'automatic',
              },
            },
          },
          rspackExperiments: {
            emotion: true, // 与 `builtins` 相同
          },
        },
        type: 'javascript/auto',
      },
    ],
  },
  experiments: {
    rspackFuture: {
      disableTransformByDefault: true,
    },
  },
};
  1. target 不再降级用户端代码(包含 node_modules)
module.exports = {
  target: ["web", "es5"],
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'builtin:swc-loader',
        options: {
          jsc: {
            parser: {
              syntax: "ecmascript"
            },
+           target: "es5" // 注意:`jsc.target` 和 `env` 不能同时设置。
          },
+        env: { // 注意:`jsc.target` 和 `env` 不能同时设置。
+         targets: "chrome >= 48"
+        }
        }
        type: 'javascript/auto',
      },
    ],
  }
};
  1. 移除非 webpack 兼容的 Rule.type

废弃 builtin.react.refresh

由于在 v0.4.0 中默认启用了 experiments.rspackFuture.disableTransformByDefaultbuiltin.react.refresh 也已被废弃。现在我们建议使用 @rspack/plugin-react-refresh 来启用 React Fast Refresh。你需要手动安装 @rspack/plugin-react-refreshreact-refresh

+ const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
const isDev = process.env.NODE_ENV === 'development';

module.exports = {
  // ...
  mode: isDev ? 'development' : 'production',
  module: {
    rules: [
      {
        test: /.jsx$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'ecmascript',
                jsx: true,
              },
              transform: {
                react: {
+                  development: isDev,
+                  refresh: isDev,
                },
              },
            },
          },
        },
      },
    ],
  },
-  builtins: {
-    react: {
-      refresh: true,
-    }
-  },
  plugins: [
+    isDev && new ReactRefreshPlugin()
  ].filter(Boolean),
};

查看更多详情,请访问 这里

废弃 builtin:sass-loader

builtin:sass-loader 现已被废弃。如果您正在使用它,请迁移到 sass-loader。Rspack 将在 v0.5.0 中移除 builtin:sass-loader

experiments.incrementalRebuild 配置废弃

experiments.incrementalRebuild 已内置开启,所以不再需要该配置。Rspack 将在 v0.5.0 中移除该配置。

重构 @rspack/core 中的导出 API

以前,一些 API 可能会通过从 @rspack/core 重新导出而被意外导出。现在通过此重构,我们从 @rspack/core 中清理了导出的 API。

这不应该造成任何问题,但如果您意外导出了 API,则可能会出现问题,您可能会以不正确的方式使用 Rspack。

如果确实有需要从此重构中移除的 API,请在 Rspack 仓库中提出问题。

废弃 builtins.devFriendlySplitChunksexperiments.newSplitChunks

为了完全迁移到 Webpack 的 splitChunks 实现,这些字段已被废弃。Rspack 将在 v0.5.0 中移除这些字段。

默认启用新的解析器

oxc_resolver 现在默认启用。

oxc_resolver 是由 oxc 项目 提供的用 Rust 编写的模块解析器。新解析器已通过了 enhanced-resolve 的所有测试套件。它比以前的实现快 5 倍,比 enhanced-resolve 快 28 倍。

新解析器可以配置为读取 tsconfig.jsoncompilerOptions.pathsreferences 字段,对 monorepo 的嵌套 alias 提供了内置支持。有关详细信息,请参阅 API resolve.tsConfig

要退出新解析器,请将 experiments.rspackFuture.newResolver 设置为 false

Migration Guide

迁移示例 migrate example 展示了如何从 Rspack 0.3.14 迁移到 Rspack 0.4.0

选择 @rspack/cli 还是 Rsbuild

如果您的应用程序是 CSR 应用程序,则我们强烈建议您使用 Rsbuild 而不是自行配置 Rspack,因为与 @rspack/cli 相比,Rsbuild 更容易使用。

升级 Node.js 版本

自 0.4.0 起,Rspack 不再支持 Node.js 14,现在仅支持 Node.js 16+。

需要手动安装 @rspack/core

package.json
{
  "devDependencies": {
+    "@rspack/core": "0.4.0",
     "@rspack/cli": "0.4.0"
  }
}

使用内置的 builtin:swc-loader 支持模块转换

自 0.4.0 起,Rspack 不再默认转换文件,你仍然可以通过如下方式来开启默认转换,

{
  experiments: {
    rspackFuture: {
      disableTransformByDefault: false; // 开启默认转换
    }
  }
}

我们建议迁移到 builtin:swc-loader 来进行模块转换,更多详情请参阅 Deprecating default transformation

对于 React 应用程序,请使用 @rspack/plugin-react-refresh 来支持 Fast Refresh

当我们禁用默认转换时,builtin.react.refresh 将无法工作,因此您需要使用 @rspack/plugin-react-refresh 来启用 Fast Refresh,更多细节请参阅 Deprecating builtin.react.refresh

迁移 builtin options 到 builtin plugins

Rspack 在 v0.4.0 中废弃了部分 builtin options 并迁移至 rspack 内部插件

目前,rspack 的内部插件分为两类:

  • 与 Webpack 兼容的插件,如 DefinePlugin, ProvidePlugin 等,这部分实现与 webpack 完成了完整的对齐
  • Rspack 独有的插件,如 SwcJsMinimizerRspackPlugin, CopyRspackPlugin 等

原有的 builtins.define 可以这样迁移:

+ const rspack = require("@rspack/core")
module.exports = {
-  builtins: {
-    define: { process.env.NODE_ENV: JSON.stringify(process.env.NODE_ENV) }
-  },
+  plugins: [
+    new rspack.DefinePlugin({ process.env.NODE_ENV: JSON.stringify(process.env.NODE_ENV) })
+  ]
}

对于 builtins.html 可以直接迁移到 HtmlRspackPlugin

+ const rspack = require("@rspack/core")
module.exports = {
-  builtins: {
-    html: [{ template: "./index.html" }]
-  },
+  plugins: [
+    new rspack.HtmlRspackPlugin({ template: "./index.html" })
+  ]
}

builtins.html 中存在多个配置,可以创建多个插件实例:

const rspack = require('@rspack/core');
module.exports = {
  plugins: [
    new rspack.HtmlRspackPlugin({ template: './index.html' }),
    new rspack.HtmlRspackPlugin({ template: './foo.html' }),
  ],
};

对于 builtins.copy 可以直接迁移到 CopyRspackPlugin

原先的 builtins.minifyOptions 我们提供了 SwcJsMinimizerRspackPlugin

const rspack = require('@rspack/core');
module.exports = {
  optimization: {
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin({
        // minimizer 配置
      }),
    ],
  },
};

其他内容可以直接参考 rspack 内部插件进行迁移,也可以在升级到 v0.4.0 后根据 CLI 提示完成操作。