Rspack 0.4 发布，增强版 CLI Rsbuild 登场！
Rsbuild v0.1 发布
我们很高兴地宣布 Rsbuild[1] v0.1 的发布！
Rsbuild 是基于 Rspack 的构建工具，旨在成为增强版的 Rspack CLI，更加容易上手和开箱即用。Rsbuild 是 Webpack 应用迁移到 Rspack 的最佳方案，他能帮助你减少 90% 配置并获得 10 倍构建速度。
🚀 性能
Rsbuild 的构建性能与原生 Rspack 处于同一水平。由于 Rsbuild 内置了更多开箱即用的功能，因此性能数据会略微低于 Rspack。
以下是构建 1000 个 React 组件的时间：
以上数据基于 Farm 团队搭建的 benchmark，更多信息请参考 performance-compare[2]。
🔥 特性
Rsbuild 具备以下特性：
易于配置：Rsbuild 的目标之一，是为 Rspack 用户提供开箱即用的构建能力，使开发者能够在零配置的情况下开发 web 项目。同时，Rsbuild 提供一套语义化的构建配置，以降低 Rspack 配置的学习成本。
性能优先：Rsbuild 集成了社区中基于 Rust 的高性能工具，包括 Rspack[3] 和 SWC[4]，以提供一流的构建速度和开发体验。与基于 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 仍在快速迭代中，并计划引入更多强大的新特性。
比如，我们正在开发 Rsbuild Doctor，这是一个强大的构建分析工具，可以用于所有 Rspack 和 Webpack 项目。它提供可视化 UI，来帮助开发者分析项目中的构建耗时、重复依赖、代码转换过程等，使构建问题更加容易被定位和解决。
我们将在近期发布 Rsbuild Doctor 的第一个可用版本，后续 Rsbuild 会与 Rspack 同步迭代，并计划于 2024 年上半年发布 1.0 版本。
欢迎查看 Rsbuild 仓库[5] 以了解更多 🙌。
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[6] 作为开箱即用的解决方案。
废弃默认转换
experiments.rspackFuture.disableTransformByDefault 在 v0.4.0 中默认启用。对于仍需要旧行为的用户，可以手动将此选项设置为 false。
此功能主要解决三类问题：内置[7] 代码转换功能，目标[8]，和自定义 Rule.type[9]。
移除对一些 内置[10] 功能的支持：
builtins.relay[11]：移动到 rspackExperiments.relaybuiltins.react[12]：移动到 jsc.transform.reactbuiltins.emotion[13]：移动到 rspackExperiments.emotionbuiltins.pluginImport[14]：移动到 rspackExperiments.importbuiltins.decorator[15]：移动到 jsc.parser.decoratorbuiltins.presetEnv[16]：移动到 jsc.env
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
}
}
};
target[17](https://www.rspack.dev/config/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',
},
],
}
};
移除非 webpack 兼容的 Rule.type[18]
废弃 builtin.react.refresh
由于在 v0.4.0 中默认启用了 experiments.rspackFuture.disableTransformByDefault，builtin.react.refresh 也已被废弃。现在我们建议使用 @rspack/plugin-react-refresh 来启用 React Fast Refresh。你需要手动安装 @rspack/plugin-react-refresh[19] 和 react-refresh[20]。
+ 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),
};
查看更多详情，请访问 这里[21]。
废弃 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.devFriendlySplitChunks 和 experiments.newSplitChunks
为了完全迁移到 Webpack 的 splitChunks 实现，这些字段已被废弃。Rspack 将在 v0.5.0 中移除这些字段。
默认启用新的解析器
oxc_resolver[22] 现在默认启用。
oxc_resolver 是由 oxc 项目[23] 提供的用 Rust 编写的模块解析器。新解析器已通过了 enhanced-resolve[24] 的所有测试套件。它比以前的实现快 5 倍，比 enhanced-resolve 快 28 倍。
新解析器可以配置为读取 tsconfig.json 的 compilerOptions.paths 和 references 字段,对 monorepo 的嵌套 alias 提供了内置支持。有关详细信息，请参阅 API resolve.tsConfig[25]。
要退出新解析器，请将 experiments.rspackFuture.newResolver 设置为 false。
Migration Guide
迁移示例 migrate example[26] 展示了如何从 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
{
"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[27]。
对于 React 应用程序，请使用 @rspack/plugin-react-refresh 来支持 Fast Refresh
当我们禁用默认转换时，builtin.react.refresh 将无法工作，因此您需要使用 @rspack/plugin-react-refresh 来启用 Fast Refresh，更多细节请参阅 Deprecating builtin.react.refresh[28]。
迁移 builtin options 到 builtin plugins
Rspack 在 v0.4.0 中废弃了部分 builtin options 并迁移至 rspack 内部插件[29]。
目前，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[30]：
+ 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[31]。
原先的 builtins.minifyOptions 我们提供了 SwcJsMinimizerRspackPlugin[32]：
const rspack = require('@rspack/core');
module.exports = {
optimization: {
minimizer: [
new rspack.SwcJsMinimizerRspackPlugin({
// minimizer 配置
}),
],
},
};
其他内容可以直接参考 rspack 内部插件[33]进行迁移，也可以在升级到 v0.4.0 后根据 CLI 提示完成操作。
参考资料
Rsbuild: https://github.com/web-infra-dev/rsbuild
[2]performance-compare: https://github.com/rspack-contrib/performance-compare
[3]Rspack: https://github.com/web-infra-dev/rspack
[4]SWC: https://swc.rs/
[5]Rsbuild 仓库: https://github.com/web-infra-dev/rsbuild
[6]Rsbuild: https://rsbuild.dev/
[7]内置: https://www.rspack.dev/config/builtins
[8]目标: https://www.rspack.dev/config/target
[9]Rule.type: https://www.rspack.dev/config/module#ruletype
[10]内置: https://www.rspack.dev/config/builtins
[11]builtins.relay: https://www.rspack.dev/config/builtins#builtinsrelay
[12]builtins.react: https://www.rspack.dev/config/builtins#builtinsreact
[13]builtins.emotion: https://www.rspack.dev/config/builtins#builtinsemotion
[14]builtins.pluginImport: https://www.rspack.dev/config/builtins#builtinspluginimport
[15]builtins.decorator: https://www.rspack.dev/config/builtins#builtinsdecorator
[16]builtins.presetEnv: https://www.rspack.dev/config/builtins#builtinspresetenv
[17]target: https://www.rspack.dev/config/target
[18]Rule.type: /config/module#ruletype
[19]@rspack/plugin-react-refresh: https://www.npmjs.com/package/@rspack/plugin-react-refresh
[20]react-refresh: https://www.npmjs.com/package/react-refresh
[21]这里: https://www.rspack.dev/zh/guide/react.html#fast-refresh
[22]oxc_resolver: https://crates.io/crates/oxc_resolver
[23]oxc 项目: https://github.com/oxc-project/oxc
[24]enhanced-resolve: https://www.npmjs.com/package/enhanced-resolve
[25]resolve.tsConfig: https://www.rspack.dev/config/resolve.html#resolvetsconfig
[26]migrate example: https://github.com/rspack-contrib/rspack-examples/pull/2
[27]Deprecating default transformation: #废弃默认转换
[28]Deprecating builtin.react.refresh: #废弃-builtinreactrefresh
[29]内部插件: /config/plugins.html#%E5%86%85%E9%83%A8%E6%8F%92%E4%BB%B6
[30]HtmlRspackPlugin: /config/plugins.html#htmlrspackplugin
[31]CopyRspackPlugin: /config/plugins.html#copyrspackplugin
[32]SwcJsMinimizerRspackPlugin: /config/plugins.html#swcjsminimizerrspackplugin
[33]内部插件: /config/plugins.html#%E5%86%85%E9%83%A8%E6%8F%92%E4%BB%B6