Rspack 0.2 リリースのお知らせ

2023年6月2日

Rspack 0.1 のリリースからほぼ3ヶ月が経ちました。コミュニティから多くの注目とフィードバックをいただき、感謝しています。

バージョン 0.2 では、realContentHash、DataURI、ESM形式のサポート、webpackとの互換性の強化、および多くの詳細の最適化など、多くの機能を追加しました。さらに、webpack APIとの互換性のおかげで、周辺のエコシステムとの互換性もさらに実現しました。vue-loader バージョン 17 (Vue3 に対応) および 15 (Vue2 に対応) との互換性テストを完了しました。Vue2/3 プロジェクトで Rspack を試すことができるようになりました。

バージョン 0.2 のこれらの新しい改善点をぜひ体験していただき、フィードバックをお待ちしております。

主な機能の更新

ローダー

バージョン 0.2 では、インラインマッチリソース、ピッチングローダー、インラインローダーなど、ほとんどのローダー API との互換性が完了しました。より多くの API により、webpack ローダーとの互換性がさらに向上しました。詳細については、webpack 互換性アップデートのローダーAPIをご覧ください。

プラグインフック

プラグインの新しいフックが追加されました。

コンパイラフック

コンパイルフック

NormalModuleFactory フック

ContextModuleFactory フック

beforeResolve

realContentHash

最適化.realContentHash を実装しました。これにより、最終製品のファイル内容に基づいてハッシュが計算されます。これにより、生成されたハッシュがより安定し、キャッシュに効果的に利用できるようになります。バージョン 0.2 では、この機能は本番環境でのビルドでデフォルトで有効になります。

ESM/System 形式

新しいバージョンでは、System/ESM 製品を生成でき、ESM 製品を出力するための設定は次のとおりです

rspack.config.js

module.exports = {
  // …
  experiments: {
    outputModule: true,
  },
  output: {
    chunkFormat: 'module',
    chunkLoading: 'import',
    library: {
      type: 'module',
    },
  },
};

新しい `SplitChunksPlugin` の実装

Rspack での既存の SplitChunksPlugin の実装を再構築し、SplitChunksPlugin の動作をより予測可能にし、関連する問題のトラブルシューティングコストを削減しました。

再構築後、SplitChunksPlugin により多くの機能を実装できると確信しています。バージョン 0.2 では、SplitChunksPlugin が次の設定オプションをサポートすることを発表できて嬉しく思います。

splitChunks.maxSize
splitChunks.maxAsyncSize
splitChunks.maxInitialSize
splitChunks.maxAsyncRequests
splitChunks.maxInitialRequests

バージョン 0.2 では、デフォルトで新しい SplitChunksPlugin を使用します。問題が発生した場合は、すぐにフィードバックをお寄せください。できるだけ早く修正します。experiments.newSplitChunks: false オプションを使用すると、非推奨の実装に戻すことができますが、新しいバージョンを使用することを強くお勧めします。バージョン 0.3 では、非推奨の実装を削除します。

DataURI サポート

DataURI のサポートを実装しました。次のコードを記述して仮想モジュールを実装できるようになりました。

import x from 'data:text/javascript,export default 42';

さらに、mimetype と scheme を2種類のモジュールルール条件としてサポートしました。たとえば、scheme が 'data' のリソースをインライン処理として扱わず、次の方法で個別のリソースファイルとして扱えるようにすることができます。

rspack.config.js

module.exports = {
  module: {
    rules: [
      {
        scheme: 'data',
        type: 'asset/resource',
      },
    ],
  },
};

破壊的な変更

ファイル名生成ロジックの調整

バージョン 0.1.12 では、ファイル名生成ロジックを webpack とさらに調整し、ファイル名生成の実装をリファクタリングしました。ただし、output.filename、output.chunkFilename、output.cssFilename、および output.cssChunkFilename の [ext] は置き換えられなくなります。この動作は現在 webpack と一致していますが、0.1.12 より前のバージョンの Rspack では破壊的な変更です。上記の 4 つのファイル名設定で [ext] を使用した場合は、対応する .js または .css に変更する必要があります。例を次に示します。
rspack.config.js
```
module.exports = {
  output: {
-    filename: "[name][ext]",
+    filename: "[name].js",

-    chunkFilename: "async/[name][ext]",
+    chunkFilename: "async/[name].js",

-    cssFilename: "[name][ext]",
+    cssFilename: "[name].css",

-    cssChunkFilename: "async/[name][ext]",
+    cssChunkFilename: "async/[name].css",
  }
}
```
詳細: https://github.com/web-infra-dev/rspack/issues/3270
本番環境で realContentHash をデフォルトで有効にしました。

詳細: https://github.com/web-infra-dev/rspack/pull/3338
Resolve の拡張機能を変更しました。

詳細: https://github.com/web-infra-dev/rspack/pull/3242
@rspack/dev-middleware および @rspack/html-plugin のエクスポート方法を変更し、@rspack/dev-middleware によってエクスポートされた getRspackMemoryAssets を削除しました。

詳細: https://github.com/web-infra-dev/rspack/pull/3358

Webpack 互換性アップデート

より多くの webpack API をサポートするにつれて、より多くのコミュニティプラグインとローダーとの互換性も確保されています。コミュニティで需要の高いプラグインとローダーをいくつか適応させました。

fork-ts-checker-webpack-plugin

Rspack の TypeScript での型チェックは非常に需要があります。Rspack は、fork-ts-checker-webpack-pluginに完全に対応しています。このプラグインを使用すると、コンパイル中に TypeScript の型チェックを実行できます。ただし、TypeScript の型チェックは通常非常に時間がかかるため、大規模なプロジェクトでの型チェックに必要な時間が Rspack 自体のビルド時間を大幅に超える可能性があります。開発モードでは、このプラグインはビルドをブロックしませんが、ビルドモードでは、このプラグインはビルドをブロックします。実際のニーズに基づいてこのプラグインを有効にするかどうかを選択してください。

license-webpack-plugin

コミュニティで広く報告されている需要は、コードからライセンスを抽出することのサポートです。Rspack は、license-webpack-plugin を介してコードからライセンスを抽出するという要件を達成できるようになりました。

style-loader & css-loader

Rspack は webpack の experiments.css 機能をデフォルトでサポートし有効にしていますが、style-loader & css-loader に強く依存しているコミュニティがまだ多く存在します。0.2.0 で style-loader と css-loader のサポートを完了しました。これにより、Svelte や Vue などのフレームワークへの適応も向上します。

node-loader

Rspack を使用して NestJS のような Node アプリケーションをパッケージングする際、アドオンを含むライブラリをパッケージングする必要があることはよくあります。これらのライブラリのネイティブ依存関係は直接 js にパッケージングできないため、特別な処理が必要です。Rspack は node-loader を採用したため、Rspack を使用して Node アプリケーションをビルドできるようになりました。

Rspack は webpack のプラグインを追加で採用しています。採用済みのプラグインとローダーは loader-compat と plugin-compat で追跡しています。使用しているコミュニティプラグインまたはローダーが互換性がある場合は、互換性マトリックスにリストできるよう、ぜひご提供ください。

フレームワークエコシステムのアップデート

Modern.js フレームワーク

Modern.js フレームワークと Rspack の密な連携と並行イテレーションのおかげで、Modern.js の Rspack モードは、フレームワークの機能の 85% をカバーし、SSR、BFF、マイクロフロントエンドのシナリオをサポートし、TypeScript の型チェック、コード互換性検出などの機能に対応しています。

ByteDance では、80 以上のプロジェクトで Modern.js の Rspack モードが使用されています。一部のプロジェクトは本番環境にデプロイされ、ビルドパフォーマンスが 10 倍向上しています。

Modern.js Doc

Modern.js フレームワークに加え、Modern.js システムのドキュメントサイトソリューションである Modern.js Doc も、バンドラーを webpack から Rspack に切り替え、Rust ベースで MDX コンパイルプロセスを書き直しました。

webpack を使用した以前のバージョンと比較して、現在のバージョンのビルド速度は数秒に短縮できます。Modern.js の公式ウェブサイトのドキュメントを例にとると、プロジェクトの起動およびビルド時間が 30 秒から 2 秒未満に短縮されました。将来的には、Modern.js Doc の名前を Rspress に変更し、Rspack の公式ドキュメントサイトソリューションとして、個別のリポジトリを通じて保守する予定です。

Modern.js コードリポジトリにアクセスして、上記の内容を体験してください。

Vue

Rspack 0.2 は vue-loader との互換性を実現しました！Vue3 プロジェクトの場合、Rspack のネイティブ CSS および TS プロセッサーを使用して、Vue プロジェクトのコンパイル速度を向上させることができます。必要なことは、vue-loader をバージョン 17.2.2 以上にアップグレードし、experimentalInlineMatchResource: true を設定することだけです。Vue3/Vue2 のサポートの詳細については、guide-vue を参照してください。

Svelte

Rspack の Loader API の優れたサポートと、svelte-loader の優れた設計のおかげで、Rspack は svelte-loader を完全に採用しました。したがって、Rspack で svelte-loader を直接使用して、svelte アプリケーションを開発できます。example-svelte を参照して、svelte-loader 関連の設定を完了できます。

Storybook

Storybook チームの協力により、Rspack は Storybook React バージョンのサポートを完了しました。Storybook を移行する方法に従って、webpack バージョンから Rspack バージョンに移行できます。実際のプロジェクトでは、docgen 機能をオンにしない場合、Rspack バージョンは Webpack バージョンよりも 5 ～ 10 倍高速であることがテストで示されています。docgen をオンにすると、Rspack は docgen の処理に Babel を依然として使用するため、パフォーマンスに影響がありますが、それでも 2 ～ 3 倍の改善が見られます。

Angular

Valor チームの協力により、Rspack は Angular の初期サポートを完了しました。Rspack を使用して Angular アプリケーションをビルドできますが、開発および HMR のサポートはまだ完全に採用されていません。バージョン 0.2.x で Angular のサポートを継続してフォローアップしていきます。

NestJS

Rosa、Nx、および Valor の協力により、Rspack は NestJS のコンパイルサポートを完了しました。Rspack を使用して NestJS アプリケーションをパッケージ化でき、実際のプロジェクトでは、Rspack のビルドパフォーマンスが webpack バージョンと比較して 5 ～ 10 倍向上することがテストで示されています。

ベンチマーク

esbuild とのベンチマーク比較を追加しました。詳細については、次のリンクを参照してください: https://github.com/web-infra-dev/performance-compare

開発ガイド

Rspack チームは、オープンソースコミュニティによる貴重な貢献を大切にし、積極的にコラボレーションを促進したいと考えています。私たちはオープンなアプローチを維持し、あらゆる段階でコミュニティに関与し、巻き込むよう努めています。

これが、現在、Rspack の開発を促進するために必要なすべての重要な資料をコントリビューターに提供する包括的な開発ガイドを作成している理由です。

現在のバージョンのガイドには、Rspack のビルド、テスト、デバッグ、プロファイリングに必要なすべての資料が含まれています。さらに、最小限の再現可能な例の作成など、コントリビューションの手順も含まれています。将来的には、ガイドは Rspack のアーキテクチャの洞察に満ちた概要を提供し、コントリビューターがプロジェクトの複雑な内部構造についての深い理解を得られるようにします。

テストインフラストラクチャ

自信を持って出荷するために、現在

Rspack リポジトリ内の例のリストの構築とテスト（現在 38 個の例）
webpack リポジトリからすべての webpack テストを移植
Node 14、16、18 でのすべてのテストの実行
統合テスト用の個別の ecosystem-ci リポジトリの保守

ナイトリーリリース

イテレーションを迅速化するために、Rspack は毎日 "@nightly" タグ付きで npm にリリースされています。

謝辞

Rspack 0.2 のリリースに伴い、このバージョンにご尽力いただいたすべてのコントリビューターに心から感謝いたします。

特に感謝申し上げます。

@TheLarkInn と @alexander-akait、Webpack に関する Rspack チームの多くの質問に回答し、解決していただきありがとうございます。
@zackarychapple、@valorkin、@edusperoni、および @Coly101、Angular の基本的なサポートで Rspack チームを支援していただき、また、@zackarychapple、このリリースブログをレビューしていただきありがとうございます。
@suxin2017、Rspack での System.js 形式と optional-dependency 機能をサポートしていただき、Windows の互換性に関して多くの貢献をしていただきありがとうございます。
@faga295、Rspack での解凍コードコメント機能と rspack プレビュー機能をサポートしていただきありがとうございます。
@lippzhang、Rspack の動作を Webpack に合わせるための多数の貢献をしていただきありがとうございます。
@HerringtonDarkholme、Rspack が rspack.config.ts を設定ファイルとして使用できるようにしていただきありがとうございます。
@dhruvkelawala、Rspack で builtins.provide 機能を実装していただきありがとうございます。
@magic-akari、Rspack で new URL("./foo", import.meta.url) 構文をサポートしていただきありがとうございます。
@tuchg、Rspack での .wasm ファイルのパッケージングをサポートしていただきありがとうございます。

また、Rspack のすべてのユーザーの皆様にも、このような若いオープンソースプロジェクトへの信頼をお寄せいただき、感謝申し上げます。皆様からの貴重なフィードバックは、プロジェクトの改善と最適化において重要な役割を果たしています。皆様のサポートと信頼が、私たちの前進の原動力です。

最後に、Rspack 0.2 のリリースを共に祝い、今後の開発とコラボレーションの機会の拡大を楽しみにしています。Rspack をサポートし、注目してくださるすべての友人に改めて感謝いたします！

Rspack 0.2 リリースのお知らせ#

主な機能の更新#

ローダー#

プラグインフック#

realContentHash#

ESM/System 形式#

新しい SplitChunksPlugin の実装#

DataURI サポート#

破壊的な変更#

Webpack 互換性アップデート#

fork-ts-checker-webpack-plugin#

license-webpack-plugin#

style-loader & css-loader#

node-loader#

フレームワークエコシステムのアップデート#

Modern.js フレームワーク#

Modern.js Doc#

Vue#

Svelte#

Storybook#

Angular#

NestJS#

ベンチマーク#

開発ガイド#

テストインフラストラクチャ#

ナイトリーリリース#

謝辞#