英文

简体中文

Rspack 0.6 发布

2024 年 4 月 10 日

主要功能更新

内置支持 mini-css-extract-plugin

现在你可以使用 rspack.CssExtractRspackPlugin 作为 mini-css-extract-plugin 的替代品。

这在某些情况下非常有用，例如当内置 CSS 解析器无法满足您的需求时，存在更多自定义的 CSS Modules 名称，或者您想使用一些依赖于 css-loader 输出的加载器，但仍然希望将 CSS 提取到单独的文件中。

更多细节，请参见 CssExtractRspackPlugin。

const rspack = require('@rspack/core');
module.exports = {
  plugins: [new rspack.CssExtractRspackPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [rspack.CssExtractRspackPlugin.loader, 'css-loader'],
      },
    ],
  },
};

这里有一个基本的项目示例。

默认启用新的 tree shaking 功能

在 Rspack 0.1.0 中，引入了基本的 tree shaking 功能。由于初始架构不稳定，我们采用了一种比较简单的实现方式，实现了基本的 tree shaking 功能（只支持消除未使用的导出变量）。然而，随着 rspack 功能的改进，架构逐渐稳定下来。

基本的 tree shaking 功能不足以满足用户的需求，例如

它无法处理循环引用，也无法为其他构建阶段提供足够的优化信息来实现进一步的优化（例如 mangleExports，concatenateModules，桶式导出优化）。
一些与互操作性相关的常见问题，例如 worker 线程模块，Common Js 模块，模块联邦等。

为了解决这些问题，我们决定采用类似于 webpack 的方法，从头开始重新实现整个优化过程。在 0.4.2 版本中，我们引入了 experiments.rspackFuture.newTreeshaking 配置来实验性地启用新的优化算法。经过四个月的 Bug 修复和优化，新的 tree shaking 算法已经变得比较稳定。因此，我们决定在 0.6.0 版本中默认启用新的 tree shaking 算法。

重大变更

移除 experiments.rspackFuture.disableApplyEntryLazily

experiments.rspackFuture.disableApplyEntryLazily 选项自 v0.5.0 版本起默认启用，并在 v0.6.0 中被移除。

移除 compiler.build 和 compiler.rebuild

compiler.build 和 compiler.rebuild 不属于 Webpack 公共 API，现在已被移除。

移除 builtins.css，请将其替换为已引入的 CSS 相关的 module.parser 和 module.generator 选项。

另外，从 v0.6.0 版本开始，Rspack 的实验性 CSS 将以 webpack 的实验性 CSS 为目标，这意味着，就像 webpack 实验性 CSS 一样，它将来不再支持不支持 CSS 变量的浏览器。因此，对于那些需要使用实验性 CSS 尚未支持的配置，或者需要支持旧版浏览器的项目，我们建议迁移到 rspack.CssExtractRspackPlugin。

在 v0.6.0 中，我们引入了三种新的 module.generator 和 module.parser 选项类型：css/auto，css 和 css/module，它们只在启用 experiments.css 时生效，查看这个例子关于如何使用它。

在 module.parser 选项中，模块类型 css，css/auto 和 css/module 都包含 namedExports 属性。它已取代 builtins.css.namedExports 配置。

对于 module.generator 选项，css/auto 和 css/module 模块类型提供了 exportsOnly，exportsConvention 和 localIdentName 属性。css 类型仅包含 exportsOnly 和 exportsConvention 属性。exportsOnly，exportsConvention 和 localIdentName 分别替换 builtins.css.modules.exportsOnly，builtins.css.modules.localsConvention 和 builtins.css.modules.localIdentName。

此外，默认值还有一些更改

exportsConvention 的值已从 'asIs'，'camelCaseOnly' 等更改为 'as-is'，'camel-case-only' 等，以保持与 webpack 实验性 css 的一致性。

使用 namedExports: false，现在可以同时使用默认导出，命名导出和命名空间导出；以前，只支持默认导出。

// Before v0.6.0, only default export was supported
import classes from './index.module.css';

// Now, in addition to default export, it also supports:
// Namespace exports
import * as classes from './index.module.css';
// Named exports
import { class1, class2 } from './index.module.css';
// Default and named exports used together
import classes, { class1, class2 } from './index.module.css';

namedExports 的默认值已从 false 更改为 true，这意味着默认情况下您需要使用命名空间导入（如 import * as classes from './style.css'）或命名导入（如 import { class1 } from './style.css'），这将提高将来与原生 CSS 模块的兼容性。这并不意味着您必须立即迁移所有导入；您可以通过设置 namedExports: false 来禁用此行为，并且由于现在 namedExports: false 也支持命名导出和命名空间导出，因此您可以逐步迁移这些导入。
localIdentName 的默认值已从开发模式下的 '[path][name][ext]__[local]' 和生产模式下的 '[hash]' 更改为开发模式和生产模式下的 '[uniqueName]-[id]-[local]'，这将略微提高 CSS 输出的 gzip 压缩尺寸。
target: 'node' 中 exportsOnly 的默认值已从 false 更改为 true。
CSS 的默认规则类型已从 css 更改为 css/auto。css/auto 会自动将具有 .module. 或 .modules. 作为中缀的 CSS 文件处理为 CSS Modules，与 css-loader 的 modules.auto: true 一致，这将简化使用 less 或 sass 与 CSS Modules 的编写规则。

将 SWC 升级到 0.90.x

将 Rust 库 swc_core 升级到 0.90.x。这将影响 SWC Wasm 插件的用户。

当多个 chunk 中的 CSS 顺序不一致时发出警告

当多个 chunk 中的 CSS 顺序不一致时，将发出警告。例如，如果您有两个入口，entryA 和 entryB，其中 entryA 先导入 a.css，然后导入 b.css，而 entryB 先导入 b.css，然后导入 a.css。当满足 splitChunks 条件时，a.css 和 b.css 将成为一个单独的 chunk。此 chunk 中 a.css 和 b.css 的顺序无法保证，从而导致以下警告。

WARNING in ⚠ chunk src_a_css-src_b_-5c8c53 [css-extract-rspack-plugin]
  │ Conflicting order. Following module has been added:
  │  * css ./css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/a.css
  │ despite it was not able to fulfill desired ordering with these modules:
  │  * css ./css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/b.css
  │   - couldn't fulfill desired order of chunk group(s) parent2
  │   - while fulfilling desired order of chunk group(s) parent1

如果您确定它们的顺序不一致并不重要，则可以通过配置 ignoreWarnings 来忽略此错误。

module.exports = {
  ignoreWarnings: [/Conflicting order/],
};

迁移指南

应用 rspack.CssExtractRspackPlugin

如果您之前使用过 mini-css-extract-plugin 和 webpack，您可以简单地用 rspack.CssExtractPlugin 替换 mini-css-extract-plugin。

+ const CssExtract = require('@rspack/core').CssExtractRspackPlugin;
- const CssExtract = require('mini-css-extract-plugin');
module.exports = {
  plugins: [new CssExtract()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [CssExtract.loader, 'css-loader'],
      },
    ],
  },
};

从 builtins.css 迁移

使用 module.parser["css/auto"].namedExports 替换 builtins.css.namedExports。
使用 module.generator["css/auto"].exportsOnly 替换 builtins.css.modules.exportsOnly。
使用 module.generator["css/auto"].exportsConvention 替换 builtins.css.modules.localsConvention。
使用 module.generator["css/auto"].localIdentName 替换 builtins.css.modules.localIdentName。

上面出现的 "css/auto" 是 CSS 的默认模块类型，可以根据需要修改为 "css" 或 "css/module"。

为了保持 `builtins.css` 的原始默认行为，请添加以下配置。根据以下设置，您可以根据需要修改该配置。

module.exports = {
   // ...
+  module: {
+    generator: {
+      "css/auto": {
+        exportsOnly: false,
+        exportsConvention: 'as-is',
+        localIdentName: isProduction ? '[hash]' : '[path][name][ext]__[local]',
+      },
+      "css": {
+        exportsOnly: false,
+        exportsConvention: 'as-is',
+      },
+      "css/module": {
+        exportsOnly: false,
+        exportsConvention: 'as-is',
+        localIdentName: isProduction ? '[hash]' : '[path][name][ext]__[local]',
+      },
+    },
+    parser: {
+      "css/auto": {
+        namedExports: false,
+      },
+      "css": {
+        namedExports: false,
+      },
+      "css/module": {
+        namedExports: false,
+      },
+    },
+  },
}

如果您需要单独配置某些模块，可以使用 `module.rules` 中的 rule.parser 和 rule.generator 选项。

迁移到 compiler.run

compiler.build 或 compiler.rebuild 已被弃用。请使用 compiler.run 进行构建和重建操作。

升级 SWC 插件

在 0.6.0 版本中，Rust 包 swc_core 已升级到 0.90.x。SWC Wasm 插件的用户需要确保版本与所使用的 swc_core 版本一致，否则可能会导致不可预见的问题。

更多详细信息，请参见 SWC 的文档。

本页内容

Rspack 0.6 发布#

主要功能更新#

内置支持 mini-css-extract-plugin#

默认启用新的 tree shaking 功能#

重大变更#

移除 experiments.rspackFuture.disableApplyEntryLazily#

移除 compiler.build 和 compiler.rebuild#

移除 builtins.css 并引入 CSS 相关的 module.parser 和 module.generator 选项#

将 SWC 升级到 0.90.x#

当多个 chunk 中的 CSS 顺序不一致时发出警告#

迁移指南#

应用 rspack.CssExtractRspackPlugin#

从 builtins.css 迁移#

迁移到 compiler.run#

升级 SWC 插件#