Rspack 0.3 版本發佈公告

2023 年 8 月 24 日

重大變更

在 0.3 版本中，當設定 experiments.css = true 時，Rspack 將預設的 CSS 處理行為與 webpack 對齊。這涉及移除許多內建的 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 自動加上前綴功能

為了更好地與 webpack 的 CSS 處理對齊，Rspack 在 0.3 中移除了內建的自動加上前綴功能。您可以使用 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 的更多功能。

改進的 Profile 支援

效能優化是商業支援中的常見需求。為了降低企業的效能優化成本，我們改進了 Rspack Profile 的體驗。您可以使用 RSPACK_PROFILE 環境變數來產生效能優化相關的檔案。

$ RSPACK_PROFILE=ALL rspack build

有關 Profile 的更多詳細資訊，請參閱效能分析。

與更多 API 對齊

splitChunks.chunks 支援 regex。
支援 splitChunk.\{cacheGroup\}.type。
支援 splitChunk.\{cacheGroup\}.idHint。
支援 ensureChunkConditionsPlugin。
rule.use 支援函式。
支援 configuration.profile。

與 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 應用程式。

本頁面

Rspack 0.3 版本發佈公告#

重大變更#

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

移除內建的 CSS 自動加上前綴功能#

限制存取內部模組#

主要功能更新#

Web Workers 支援#

builtin:swc-loader 支援#

改進的 Profile 支援#

更多 Hook 和外掛支援#

與 Webpack 架構對齊#

Rspack 生態系統#