Rsdoctor の使用#

Rsdoctor は、コンパイル時間、コンパイル前後のコード変更、モジュールの参照関係、重複モジュールなど、ビルドプロセスを視覚的に表示できるビルドアナライザーです。

ビルド出力やビルドプロセスをデバッグする必要がある場合は、Rsdoctor を使用してトラブルシューティングを行うことができます。

💡 Rsdoctor とは？#

• Rsdoctor は、ビルドプロセスとビルドアーティファクトを診断および分析するための一体型ツールです。
• Rsdoctor は、Rspack または webpack ビルド分析をサポートするツールです。
• Rsdoctor は、コンパイルの時間消費と動作の詳細を表示できる分析ツールです。
• Rsdoctor は、rspack 組み込みの swc-loader の時間消費とコンパイルプロセスを分析できるツールです。

🔥 機能#

• コンパイルの可視化: Rsdoctor は、コンパイルの動作と時間消費を視覚化し、ビルドの問題を容易に確認できるようにします。

• 複数の分析機能: Rsdoctor は、ビルドアーティファクト、ビルド時間分析、および劣化防止機能をサポートします。

  • ビルドアーティファクトは、リソースリストやモジュールの依存関係などをサポートします。
  • ビルド時間分析は、Rspack の組み込み swc-loader を含む、ローダー、プラグイン、およびリゾルバーのビルドプロセス分析をサポートします。
  • ビルドルールは、重複パッケージの検出や ES バージョンチェックなどをサポートします。

• カスタムルールのサポート: 組み込みのビルドスキャンルールに加えて、Rsdoctor は、Rsdoctor のビルドデータに基づいて、ユーザーがカスタムコンポーネントスキャンルールを追加することもサポートします。

機能の詳細#

この wiki から機能の詳細を確認できます: Rsdoctor の機能。

バンドル分析#

Rspack で Rsdoctor を使用して バンドル分析 を行うことができます。

コンパイル分析#

Rsdoctor は、各ローダーとプラグインのコンパイル時間を視覚的に表示できるビルドアナライザーです。詳細については、コンパイル分析 を参照してください。

クイックスタート#

Rspack ベースのプロジェクトでは、次のように Rsdoctor を有効にすることができます。

1. Rsdoctor プラグインをインストールします。

npm add @rsdoctor/rspack-plugin -D

2. RsdoctorRspackPlugin プラグインを登録します。

以下に示すように、rspack.config.js の plugins セクションで RsdoctorRspackPlugin プラグインを初期化します。

const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');

module.exports = {
  // ...
  plugins: [
    process.env.RSDOCTOR &&
      new RsdoctorRspackPlugin({
        // plugin options
      }),
  ].filter(Boolean),
};

3. CLI コマンドの前に RSDOCTOR=true 環境変数を追加します。

# dev
RSDOCTOR=true rspack serve

# build
RSDOCTOR=true rspack build

上記のコマンドを実行した後、ビルドが完了すると、ビルド分析ページが開きます。完全な機能については、Rsdoctor ドキュメント を参照してください。

4. [オプション] オプションの設定

RsdoctorRspackPlugin のパラメータ設定については、このドキュメント options を参照してください。