Rspack 是一个基于 Rust 编写的高性能 JavaScript 打包工具,由字节跳动 Web Infra 开源。它提供对 webpack 生态良好的兼容性,能够无缝替换 webpack,并提供闪电般的构建速度。
- GitHub 地址:web-infra-dev/rspack
Rspack 1.0 alpha 现已发布至 npm!
在发布 Rspack 1.0 稳定版之前,我们将进行 1~2 个月的测试,以改进 1.0 版本的 API 稳定性和可靠性,并验证对下游项目的影响。
Rspack 1.0 稳定版预计于今年 8 月推出。这将是一个重要的里程碑,意味着 Rspack 已经实现了 webpack 主要的功能和 API,能够帮助成千上万的 webpack 项目平滑地迁移,并获得显著的构建性能提升。
产物优化
Rspack 1.0 默认在 production 构建时开启 optimization.concatenateModules
,这个选项用于启用 module concatenation 优化,也被称为作用域提升(Scope Hoisting)。
js
复制代码
export default {
optimization: {
// 现在在生产中默认启用
concatenateModules: mode === 'production',
},
};
Module concatenation 的作用是将多个模块合并到一个函数中,从而减少浏览器解析和执行 JavaScript 代码的开销。合并模块后,可以减少一些冗余的代码,比如模块间的导入和导出语句,这样可以进一步减小打包后的产物体积。
开启 module concatenation 后,Rspack 的产物体积可以减少约 4% ~ 10%(before Gzip)。
当前 Rspack 已经对标 webpack 实现了绝大多数的优化策略,在未来的版本中,Rspack 将在 webpack 的基础上进行探索和改进,以提供更深度的优化和更小的产物体积。
内置 Lightning CSS
Rspack 1.0 内置支持了 Lightning CSS。Lightning CSS 是一个用 Rust 编写的高性能 CSS 解析器、转换器、打包器和压缩器。
Rspack 新版本实现了基于 Lightning CSS 的 CSS 压缩插件,并将其作为 Rspack 的默认 CSS 压缩器。与之前使用的 SWC CSS 压缩插件相比,它进行了更多的优化,能够使 CSS 产物更小。
diff
复制代码
export default {
optimization: {
minimizer: [
// 默认的 CSS 压缩器已更改:
- new rspack.SwcCssMinimizerRspackPlugin()
+ new rspack.LightningCssMinimizerRspackPlugin()
],
},
};
例如,Rspack 已经能够对 CSS 模块进行 tree shaking 优化,但这仅能删除 JS 文件未引用的 CSS Modules 类名。使用 Lightning CSS 的 unusedSymbols 选项后,Rspack 现在可以消除 CSS Modules 文件中未使用的声明,包括 ID、keyframes、CSS variables 或其他 CSS identifiers。
我们相信 Lightning CSS 将成为下一代构建工具的基石,Rspack 将基于 Lightning CSS 支持更多 CSS 编译能力。感谢 @devongovett 创造了这样优秀的工具。
精简核心
为了使 Rspack v1 能够保持长期稳定,我们移除了一些 Rspack core 内置的非核心功能,使 core 保持精简,并专注于提供 bundler 层面的通用能力。
在 0.x 版本中,Rspack core 内置了部分 SWC 插件,用于支持 Emotion、Styled Components 和 Relay,这是因为 Rspack 早期尚未支持使用 SWC Wasm 插件,只能在 core 中集成它们。
目前 Rspack 已支持通过 builtin:swc-loader
的 experimental.plugins 来使用 SWC 插件,因此我们移除了 Rspack core 内置的插件,包括:
以 @swc/plugin-styled-components
为例,在 v1.0 中可以通过如下方式使用。
- 安装:
bash复制代码npm i @swc/plugin-styled-components -D
- 配置:
diff
复制代码
export default {
module: {
rules: [
{
test: /\.jsx?$/,
loader: "builtin:swc-loader",
options: {
- rspackExperiments: {
- styledComponents: {},
- },
jsc: {
+ experimental: {
+ plugins: [["@swc/plugin-styled-components", {}]],
+ },
},
},
},
],
},
};
CSS 打包
Rspack 1.0 对齐了 webpack 的 experiment.css 默认值,这使得从 webpack 迁移到 Rspack 更加容易。
在 webpack 生态中,有三种常用的方式来打包 CSS 文件:
- 使用 css-loader 和 mini-css-extract-plugin,生成独立的 CSS 文件。
- 使用 css-loader 和 style-loader,将 CSS 通过
<style>
标签注入。 - 使用 experiment.css,这是 webpack 5 引入的实验性功能,提供 CSS 原生支持。
在 0.x 版本中,Rspack 默认启用了 experiment.css
,这会与 css-loader 产生冲突。用户需要手动关闭 experiment.css
才能使用 css-loader。
从 Rspack 1.0 开始,experiment.css
的默认值变更为 false
,与 webpack 保持一致,并允许用户使用以上任意一种方法。
你可以添加以下配置来继续使用 experiment.css
:
js
复制代码
export default {
experiments: {
css: true,
},
};
如何升级
安装 Rspack 和 Rspack CLI 的 alpha 版本:
bash
复制代码
# npm
npm add -D --save-exact @rspack/core@alpha @rspack/cli@alpha
# yarn
yarn add -D --save-exact @rspack/core@alpha @rspack/cli@alpha
# pnpm
pnpm add -D --save-exact @rspack/core@alpha @rspack/cli@alpha
在 Rspack alpha 测试的过程中,新版本仍会引入少量不兼容更新。我们会在更新日志中标注这些变更。因此,在升级版本之前,请阅读更新日志以了解具体差异。
对于使用 Rsbuild 的用户,请等待 Rsbuild 1.0 Alpha 版本发布(预计在 1~2 周以后)。
不兼容更新
resolve.tsConfigPath
resolve.tsConfigPath
配置已被移除,请使用 resolve.tsConfig 代替。
diff
复制代码
export default {
resolve: {
- tsConfigPath: path.resolve(__dirname, './tsconfig.json'),
+ tsConfig: path.resolve(__dirname, './tsconfig.json'),
},
};
rspackExperiments.styledComponents
builtin:swc-loader
的 rspackExperiments.styledComponents
配置已被移除,请使用 @swc/plugin-styled-components 代替。
diff
复制代码
export default {
module: {
rules: [
{
test: /\.jsx$/,
loader: "builtin:swc-loader",
options: {
- rspackExperiments: {
- styledComponents: true,
- },
jsc: {
+ experimental: {
+ plugins: [["@swc/plugin-styled-components", {}]],
+ },
},
},
},
],
},
};
rspackExperiments.emotion
builtin:swc-loader
的 rspackExperiments.emotion
配置已被移除,请使用 @swc/plugin-emotion 代替。
diff
复制代码
export default {
module: {
rules: [
{
test: /\.jsx$/,
loader: "builtin:swc-loader",
options: {
- rspackExperiments: {
- emotion: true,
- },
jsc: {
+ experimental: {
+ plugins: [["@swc/plugin-emotion", {}]],
+ },
},
},
},
],
},
};
rspackExperiments.relay
builtin:swc-loader
的 rspackExperiments.relay
配置已被移除,请使用 @swc/plugin-relay 代替。
diff
复制代码
export default {
module: {
rules: [
{
test: /\.jsx$/,
loader: "builtin:swc-loader",
options: {
- rspackExperiments: {
- relay: true,
- },
jsc: {
+ experimental: {
+ plugins: [["@swc/plugin-relay", {}]],
+ },
},
},
},
],
},
};
其他
其他不兼容更新如下:
- 当
mode === 'none'
时,optimization.chunkIds
默认值变更为'natural'
,详见 #6956。 - 当
mode === 'none'
时,optimization.moduleIds
默认值变更为'natural'
,详见 #6956。 - Rust crate
swc_core
已升级到0.95.x
,请升级你的 SWC Wasm 插件,详见 #6887。 - 移除了
output.amdContainer
,使用output.library.amdContainer
代替,详见 #6958。 - 移除了
Compilation.currentNormalModuleHooks
,详见 #6859。 - 移除了
stats.modules[].profile.integration
,详见 #6947。 - 移除了一些
SwcJsMinimizerRspackPluginOptions
的选项,详见 #6950。
源文:还在用 webpack?试试 Rspack v1.0 Alpha
如有侵权请联系站点删除!
Technical cooperation service hotline, welcome to inquire!