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は、Rustで書かれた非常に高速なCSSパーサー、トランスフォーマー、バンドラー、ミニファイアです。

Rspackの新バージョンでは、Lightning CSSに基づくCSSミニファイアプラグインを実装し、これがRspackのデフォルトのCSSミニファイアになりました。以前使用されていたSWC CSSミニファイアプラグインと比較して、より多くの最適化を適用することで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のツリーシェイキング機能がありますが、JSファイルから参照されていない未使用のCSS Modulesクラス名のみを削除します。Lightning CSSのunusedSymbolsオプションを使用することで、RspackはID、キーフレーム、CSS変数、その他のCSS識別子など、CSS Modulesファイル内の未使用の宣言を削除できるようになりました。

Lightning CSSは次世代ビルドツールの共通基盤になると考えており、RspackはLightning CSSに基づいてより多くのCSSコンパイル機能をサポートしていきます。このような優れたツールを作成してくれた@devongovettに感謝します。

リーンコア

Rspack v1の長期的な安定性を確保するため、Rspackコアに組み込まれていた一部のコア以外の機能を削除しました。これにより、コアは無駄がなくなり、共通のバンドラー機能の提供に集中できます。

v0.xでは、RspackコアにはEmotion、Styled Components、RelayをサポートするためのSWCプラグインが組み込まれていました。これは、初期の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ファイルをバンドルする一般的な方法が3つあります。

css-loaderとmini-css-extract-pluginを使用して、スタンドアロンCSSファイルを生成する。
css-loaderとstyle-loaderを使用して、`<style>`タグを介してCSSを挿入する。
webpack 5で導入された実験的機能であるexperiment.cssを使用して、ネイティブCSSサポートを提供する。

バージョン0.xでは、Rspackはデフォルトで`experiment.css`を有効にしていましたが、これはcss-loaderと競合していました。ユーザーはcss-loaderを使用するために手動で`experiment.css`を無効にする必要がありました。

Rspack 1.0以降、`experiment.css`のデフォルト値はwebpackに合わせて`false`に変更され、ユーザーは上記のいずれの方法でも使用できるようになりました。

`experiment.css`を引き続き使用するには、以下の設定を追加します。

rspack.config.mjs

export default {
  experiments: {
    css: true,
  },
};

アップグレード方法

RspackとRspack CLIのアルファ版をインストールするには

# 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のアルファテスト中は、新しいバージョンでも破壊的な変更が導入される可能性があります。これらの変更は変更履歴に記載されます。アップグレードする前に、変更履歴を読んで違いを理解してください。

Rsbuildユーザーは、Rsbuild 1.0アルファ版のリリース（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クレート`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

その他