英语

简体中文

宣布 Rspack 1.0 Alpha 版本

2024 年 6 月 29 日

Rspack 1.0 alpha 版本现已在 npm 上发布！

在发布 Rspack 1.0 稳定版之前，我们将进行 1-2 个月的测试，以提高 v1.0 的 API 稳定性和可靠性，并验证其对下游项目的影响。

Rspack 1.0 稳定版预计将于今年 8 月发布。这是一个重要的里程碑，因为它意味着 Rspack 已经实现了 webpack 的主要功能和 API。这将使数千个 webpack 项目能够平滑过渡，同时在构建性能方面实现显著提升。

输出优化

Rspack 1.0 在生产环境构建中默认启用 optimization.concatenateModules。此选项启用模块合并优化，也称为范围提升。

rspack.config.mjs

export default {
  optimization: {
    // Now enabled by default in production
    concatenateModules: mode === 'production',
  },
};

模块合并的主要目的是将多个模块合并成单个函数，从而减少浏览器解析和执行 JavaScript 代码的开销。通过合并模块，可以减少模块之间重复的代码，例如导入和导出语句，从而缩减包的大小。

启用模块合并后，Rspack 的输出大小可以减少约 4% 到 10%（在 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 输出更小。

rspack.config.mjs

export default {
  optimization: {
    minimizer: [
      // The default CSS minimizer changed:
-     new rspack.SwcCssMinimizerRspackPlugin()
+     new rspack.LightningCssMinimizerRspackPlugin()
    ],
  },
};

你可以通过以下配置切换回 SwcCssMinimizerRspackPlugin。

export default {
  optimization: {
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin(),
      new rspack.SwcCssMinimizerRspackPlugin(),
    ],
  },
};

例如，Rspack 已经支持 CSS Modules 的树摇，但它只删除了 JS 文件引用的未使用 CSS Modules 类名。借助 Lightning CSS 的 unusedSymbols 选项，Rspack 现在可以消除 CSS Modules 文件中未使用的声明，包括 ID、关键帧、CSS 变量或其他 CSS 标识符。

我们相信 Lightning CSS 将成为下一代构建工具的共享基础，而 Rspack 将基于 Lightning CSS 支持更多 CSS 编译功能。感谢 @devongovett 创建了如此出色的工具。

精简核心

为了确保 Rspack v1 的长期稳定性，我们删除了一些内置于 Rspack 核心的非核心功能。这使得核心变得精简，专注于提供通用的打包程序功能。

在 v0.x 中，Rspack 核心内置了 SWC 插件，以支持 Emotion、Styled Components 和 Relay。这是因为在 Rspack 的早期，它不支持使用 SWC Wasm 插件，只能将它们集成到核心之中。

目前，Rspack 支持通过 builtin:swc-loader 中的 experimental.plugins 使用 SWC 插件。因此，我们从 Rspack 核心移除了内置插件，包括

以 @swc/plugin-styled-components 为例。在 v1.0 中，你可以按以下步骤使用它。

安装

npm i @swc/plugin-styled-components -D

配置

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 通过 <style> 标签注入 CSS。
使用 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

rspack.config.mjs

export default {
  experiments: {
    css: true,
  },
};

如何升级

要安装 Rspack 和 Rspack CLI 的 alpha 版本，请执行以下操作

# 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 代替。

rspack.config.mjs

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 代替。

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 代替。

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 代替。

export default {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        loader: "builtin:swc-loader",
        options: {
-         rspackExperiments: {
-           relay: true,
-         },
          jsc: {
+           experimental: {
+             plugins: [["@swc/plugin-relay", {}]],
+           },
          },
        },
      },
    ],
  },
};

其他

其他重大更改

optimization.chunkIds 在 mode === 'none' 时默认值为 'natural'，请参阅 #6956。
optimization.moduleIds 在 mode === 'none' 时默认值为 '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.

本页内容

宣布 Rspack 1.0 Alpha 版本#

输出优化#

内置 Lightning CSS#

精简核心#

打包 CSS#

如何升级#

重大更改#

resolve.tsConfigPath#

rspackExperiments.styledComponents#

rspackExperiments.emotion#

rspackExperiments.relay#

其他#

宣布 Rspack 1.0 Alpha 版本

输出优化

内置 Lightning CSS

精简核心

打包 CSS

如何升级

重大更改

resolve.tsConfigPath

rspackExperiments.styledComponents

rspackExperiments.emotion

rspackExperiments.relay

其他