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、barrel exports 優化）。
經常會出現一些與互通性相關的問題，例如 worker-thread 模組、Common Js 模組、模組聯合等。

為了解決這些問題，我們決定採用類似 webpack 的方法，從底層重新實作整個優化過程。在 0.4.2 版本中，我們引入了 experiments.rspackFuture.newTreeshaking 配置，以實驗性地啟用新的優化演算法。經過四個月的錯誤修復和優化，新的 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 crate swc_core 升級到 0.90.x。這將影響 SWC Wasm 外掛的使用者。

當多個區塊中的 CSS 順序不一致時發出警告

當多個區塊中的 CSS 順序不一致時，將會發出警告。例如，如果您有兩個 entry，entryA 和 entryB，其中 entryA 依序匯入 a.css 和 b.css，而 entryB 依序匯入 b.css 和 a.css。當滿足 splitChunks 條件時，a.css 和 b.css 將會成為一個單獨的區塊。此區塊中 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 crate 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#

當多個區塊中的 CSS 順序不一致時發出警告#

遷移指南#

套用 rspack.CssExtractRspackPlugin#

從 builtins.css 遷移#

遷移至 compiler.run#

升級 SWC 外掛程式#