Rspack 0.6 リリースのお知らせ

2024年4月10日

主要な機能アップデート

mini-css-extract-pluginのビルトインサポート

mini-css-extract-pluginの代わりにrspack.CssExtractRspackPluginを使用できるようになりました。

これは、例えばビルトイン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'],
      },
    ],
  },
};

基本的なプロジェクト例があります。

新しいツリーシェイキングをデフォルトで有効化

Rspack 0.1.0では、基本的なツリーシェイキング機能が導入されました。初期アーキテクチャが不安定だったため、基本バージョンのツリーシェイキングを実装するために比較的単純なアプローチを採用しました（未使用のエクスポート変数の削除のみをサポート）。しかし、rspackの機能が向上するにつれて、アーキテクチャは徐々に安定しました。

基本的なツリーシェイキング機能は、ユーザーのニーズを満たすには不十分でした。例えば、

循環参照を処理できず、他のビルドステージがさらなる最適化（mangleExports、concatenateModules、バレルエクスポートの最適化など）を実現するための十分な最適化情報を提供できませんでした。
worker-threadモジュール、Common Jsモジュール、モジュールフェデレーションなど、相互運用性に関連する問題が頻繁に発生しました。

これらの問題に対処するため、webpackと同様のアプローチを採用し、最適化プロセス全体をボトムアップで再実装することにしました。バージョン0.4.2では、新しい最適化アルゴリズムを実験的に有効にするために、`experiments.rspackFuture.newTreeshaking`設定を導入しました。4か月間のバグ修正と最適化を経て、新しいツリーシェイキングアルゴリズムは比較的安定しました。そのため、バージョン0.6.0では、新しいツリーシェイキングアルゴリズムをデフォルトで有効にすることにしました。

破壊的変更

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のexperiments CSSはwebpackのexperiments CSSをターゲットとして整合させるため、webpack experiments CSSと同様に、将来的にはCSS変数をサポートしていないブラウザはサポートされなくなります。そのため、experiments CSSでまだサポートされていない設定を使用する必要があるプロジェクト、または古いブラウザをサポートする必要があるプロジェクトは、rspack.CssExtractRspackPluginに移行することをお勧めします。

v0.6.0では、`css/auto`、`css`、`css/module`の3つの新しいタイプの `module.generator` および `module.parser` オプションを導入しました。これらのオプションは、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` を置き換えます。

さらに、デフォルト値にいくつかの変更があります。

webpack experiments cssとの整合性を保つため、`exportsConvention` の値が `'asIs'`、`'camelCaseOnly'` などから `'as-is'`、`'camel-case-only'` などに変更されました。

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` は名前付きエクスポートと名前空間エクスポートもサポートしているため、これらのインポートを段階的に移行できます。
開発モードでは `'[path][name][ext]__[local]'`、本番モードでは `'[hash]'` であった `localIdentName` のデフォルト値が、開発モードと本番モードの両方で `'[uniqueName]-[id]-[local]'` に変更されました。これにより、CSS出力のgzip圧縮サイズがわずかに向上します。
target: 'node' における `exportsOnly` のデフォルト値が `false` から `true` に変更されました。
CSSのデフォルトのルールタイプが `css` から `css/auto` に変更されました。 `css/auto` は、CSS Modulesとして ` .module.` または ` .modules.` を中置詞として持つCSSファイルを自動的に処理します。これは、css-loader の `modules.auto: true` と一致しており、CSS Modulesでlessまたはsassを使用するための記述ルールが簡素化されます。

SWCを0.90.xにアップグレード

Rustクレート `swc_core` を `0.90.x` にアップグレードしました。これは、SWC Wasmプラグインのユーザーに影響します。

複数チャンクにおける CSS 順序の不一致に関する警告の出力

複数のチャンクにおける CSS の順序が一致しない場合、警告が発行されます。例えば、`entryA` と `entryB` の2つのエントリがあり、`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 を使用していた場合は、`mini-css-extract-plugin` を `rspack.CssExtractPlugin` に置き換えるだけで済みます。

+ 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 からの移行

`builtins.css.namedExports` を `module.parser["css/auto"].namedExports` に置き換えます。
`builtins.css.modules.exportsOnly` を `module.generator["css/auto"].exportsOnly` に置き換えます。
`builtins.css.modules.localsConvention` を `module.generator["css/auto"].exportsConvention` に置き換えます。
`builtins.css.modules.localIdentName` を `module.generator["css/auto"].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のビルトインサポート#

新しいツリーシェイキングをデフォルトで有効化#

破壊的変更#

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 プラグインのアップグレード#