バンドル解析

webpack-bundle-analyzer

Rspackのコマンドラインインターフェース（CLI）は、--analyzeオプションを介してバンドル解析をすぐにサポートしています。これは内部的にwebpack-bundle-analyzerを使用しています。

$ rspack build --analyze

他のバンドル解析ツール（bundle-statsやstatoscopeなど）を使用してさらに分析するために、stats.jsonファイルを生成することもできます。

$ rspack build --json stats.json

Rsdoctorは、主にRspackの出力情報（リソースのサイズ、重複パッケージ、モジュールの参照関係など）を分析するために使用されるBundle Sizeモジュールを提供しています。

バンドル概要：アーティファクトの総数とサイズ、各ファイルタイプの数とサイズを表示します。重複パッケージとその参照チェーンも表示します。
バンドル解析モジュール：ビルドアーティファクトのリソース（アセット）と含まれるモジュールのサイズとコード情報を分析します。このモジュールでは、アセット内のパッケージ化後のモジュールの実際のコードサイズ、元のコードまたはパッケージ化されたコードセグメント、およびモジュールの参照関係を確認できます。

ナビゲーションバーの「バンドルサイズ」オプションをクリックして、バンドル解析レポートを表示します。このページから詳細を確認できます：バンドルサイズ

バンドルサイズの最適化は、本番ビルドにおいて重要な部分であり、オンラインユーザーのユーザーエクスペリエンスに直接影響します。このドキュメントでは、Rspackにおける一般的なバンドルサイズ最適化の方法を紹介します。

ウェブプロジェクトでは、サードパーティの依存関係の複数のバージョンをバンドルすることが一般的です。重複する依存関係は、バンドルサイズが増加し、ビルド速度が低下する原因となります。

Rsdoctorを使用して、プロジェクトに重複する依存関係があるかどうかを検出できます。Rsdoctorはビルドプロセス中に分析を行い、バンドルされた重複依存関係を検出して視覚的に表示します。

詳細については、Rsdoctor - 重複依存関係の問題を参照してください。

このページの内容