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 程式碼的額外開銷。透過合併模組，可以減少模組之間重複的程式碼，例如 import 和 export 語句，從而縮減套件大小。

啟用模組串聯後，Rspack 的輸出大小可減少約 4% 到 10%（Gzip 壓縮前）。

目前，Rspack 已經實作了與 webpack 對齊的大部分最佳化策略。在未來的版本中，Rspack 將探索並根據 webpack 進行改進，以提供更深入的最佳化和更小的輸出大小。

內建 Lightning CSS

Rspack 1.0 已內建整合 Lightning CSS。Lightning CSS 是一個極快的 CSS 解析器、轉換器、套件器和 minifier，以 Rust 撰寫。

新版本的 Rspack 已經實作了基於 Lightning CSS 的 CSS minifier 外掛，它現在是 Rspack 的預設 CSS minifier。與先前使用的 SWC CSS minifier 外掛相比，它會應用更多最佳化，使 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 進行了 tree shaking，但它只會移除 JS 檔案中參考的未使用的 CSS Modules 類別名稱。透過 Lightning CSS 的 unusedSymbols 選項，Rspack 現在可以消除 CSS Modules 檔案中未使用的宣告，包括 ID、keyframes、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", {}]],
+           },
          },
        },
      },
    ],
  },
};

其他

其他重大變更

當 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。

本頁內容

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

其他