Rspack 0.3 发布公告#

2023年8月24日

重大变更#

在 0.3 版本中，Rspack 将默认 CSS 处理行为与 webpack 对齐，当设置 experiments.css = true 时。这涉及删除许多内置的 CSS 转换逻辑，从而引入了一些重大变更。如果您的应用程序以前依赖于这些转换逻辑，请注意以下迁移步骤。

删除 @rspack/postcss-loader 和 builtins.postcss#

在 Rspack 完全支持 postcss-loader 之前，Rspack 实现了 @rspack/postcss-loader 和内置的 builtins.postcss 来完成该功能。目前，Rspack 完全支持 postcss-loader，因此我们决定弃用 @rspack/postcss-loader 和 builtins.postcss。@rspack/postcss-loader 的用户可以无缝迁移到 postcss-loader，而以前使用 Rspack 的 builtins.postcss 进行 px2rem 转换功能的用户可以迁移到 postcss-loader 和 postcss-plugin-px2rem。以下是迁移过程

• 之前

module.exports = {
  builtins: {
    postcss: {
      pxtorem: {
        rootValue: 50,
      },
    },
  },
};

• 之后

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-plugin-px2rem',
                    {
                      rootValue: 100,
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

删除内置 CSS Autoprefixer 功能#

为了更好地与 webpack 的 CSS 处理对齐，Rspack 在 0.3 中删除了内置的 autoprefixer 功能。您可以使用 postcss-loader 来实现 autoprefixer。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [['autoprefixer']],
              },
            },
          },
        ],
        type: 'css',
      },
    ],
  },
};

您可以参考 examples/postcss-loader 获取完整的示例。

限制访问内部模块#

由于 Rspack 中当前内部模块 API 的不稳定性，直接访问内部模块很容易导致重大变更。因此，Rspack 限制了直接访问内部模块的能力，只支持从根模块访问 Rspack 的 API。

• 之前

import { Stats } from '@rspack/core/dist/stats'; // not supported since 0.3

• 之后

import { Stats } from '@rspack/core';

主要功能更新#

Web Workers 支持#

Rspack 本地支持 Web Workers，这意味着您可以开箱即用地使用 Web Workers，而无需使用 worker-loader。以下是使用方法

new Worker(new URL('./worker.js', import.meta.url));
new Worker(new URL('./worker.js', import.meta.url), {
  name: 'my-worker',
});

有关 web workers 支持的更多信息，请参见 web workers。

builtin:swc-loader 支持#

尽管 Rspack 提供了许多 SWC 编译配置选项，但这些配置是全局性的，无法满足对不同模块使用不同 SWC 转换逻辑的要求。因此，Rspack 支持 builtin:swc-loader 以提供更细粒度的 SWC 转换配置。与 JavaScript 版本的 swc-loader 相比，builtin:swc-loader 具有更好的性能。您可以使用 builtin:swc-loader 如下

const path = require('path');
const config = {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'ecmascript',
                jsx: true,
              },
              transform: {
                react: {
                  pragma: 'React.createElement',
                  pragmaFrag: 'React.Fragment',
                  throwIfNamespace: true,
                  development: false,
                  useBuiltins: false,
                },
              },
            },
          },
        },
        type: 'javascript/auto',
      },
    ],
  },
};
module.exports = config;

您可以参考 examples/builtin-swc-loader 获取更多示例。目前，builtin:swc-loader 仍然存在一些限制，例如不支持 Wasm 插件等。Rspack 将在未来的版本中继续迭代并支持 builtin:swc-loader 的更多功能。

改进的性能分析支持#

性能优化是业务支持中的常见需求。为了降低企业性能优化的成本，我们改进了 Rspack Profile 的体验。您可以使用 RSPACK_PROFILE 环境变量生成与性能分析相关的文件，以便进行性能优化。

$ RSPACK_PROFILE=ALL rspack build

有关 Profile 的更多详细信息，请参见 性能分析。

与更多 API 对齐

• splitChunks.chunks 支持正则表达式。
• 支持 splitChunk.\{cacheGroup\}.type。
• 支持 splitChunk.\{cacheGroup\}.idHint。
• 支持 ensureChunkConditionsPlugin。
• rule.use 支持函数。
• 支持 configuration.profile。

更多 Hook 和插件支持#

与 0.2 版本相比，我们在 0.3 版本中实现了更多插件 API，并对更多插件进行了兼容性改进。同时，我们细化了 webpack 的插件 API 支持进度，使插件 API 的支持进度透明化。您可以在此处跟踪插件 API 的实现进度：plugin-api-progress。

与 Webpack 架构对齐#

在 0.3 版本中，我们进一步优化了与 webpack 架构的对齐，从最初的基于 AST 的代码生成架构迁移到基于字符串转换的架构。这种对齐工作进一步确保 Rspack 在代码生成阶段可以与 webpack 的更多 Hook API 对齐，以兼容更多社区插件。

Rspack 生态系统#

从 0.2 版本开始，Rspack 提供对 vue-loader 的支持。但是，基于 vue-loader 创建一个完整的 Vue.js CLI 解决方案可能是一项复杂的任务。为了简化使用 Rspack 开发 Vue.js 应用程序，我们提供了 Rsbuild，这是一个开箱即用的解决方案。此解决方案帮助开发人员使用 Rspack 轻松开发 Vue.js 应用程序。