ビルドパフォーマンスプロファイル
この章では、Rspackにおける一般的なパフォーマンスのボトルネックとパフォーマンスプロファイルの方法について説明します。
パフォーマンスのボトルネック
Rspack自体は優れたビルドパフォーマンスを提供しますが、Rspackで一部のJavaScriptローダーやプラグインを使用すると、特に大規模なプロジェクトではビルドパフォーマンスが低下する可能性があります。
これらの問題の一部は、Rspackの組み込みの高性能な代替手段で解決できますが、その他はパフォーマンス分析ツールを使用して特定し、最適化する必要があります。
いくつかの一般的なケースを以下に示します。
babel-loader
babel-loader は、Babelを使用してJavaScriptとTypeScriptコードをコンパイルします。Babelをより高速なSWCに置き換えることができます。Rspackには、Rust版のswc-loaderである組み込みのbuiltin:swc-loaderがあり、より優れたパフォーマンスを提供することを目的としています。
カスタム変換のためにBabelプラグインを使用する必要がある場合は、Rule.includeを使用してbabel-loaderを設定し、Babelのコンパイルオーバーヘッドを削減するために、可能な限り少ないファイルに一致するようにします。
postcss-loader
postcss-loader は、PostCSSに基づいてCSSコードをコンパイルします。これは、多くの場合、PostCSSプラグインと組み合わせてCSS構文のダウングレード、ベンダープレフィックスの追加などを行います。Rspackの組み込みのbuiltin:lightningcss-loaderを使用することで、PostCSSをより高速なLightning CSSに置き換えることができます。
プロジェクトでTailwind CSS v3のPostCSSプラグインを使用している場合、RustとLightning CSSに基づいており、大幅なパフォーマンス向上をもたらすTailwind CSS v4のリリースを待つ必要があるかもしれません。詳細については、Open-sourcing our progress on Tailwind CSS v4.0を参照してください。
terser-webpack-plugin
terser-webpack-plugin は、Terserに基づいてJavaScriptコードを縮小します。Rspackの組み込みのSwcJsMinimizerRspackPluginを使用することで、Terserをより高速なSWCミニファイザーに置き換えることができます。
css-minimizer-webpack-plugin
css-minimizer-webpack-plugin は、cssnanoなどのツールに基づいてCSSコードを縮小します。Rspackの組み込みのLightningCssMinimizerRspackPluginを使用することで、cssnanoをより高速なLightning CSSミニファイザーに置き換えることができます。
less-loader
less-loader は、Lessに基づいて.lessファイルをコンパイルします。Lessには現在、公式に実装された高性能な代替手段がないため、代わりにsass-loaderとsass-embeddedを使用することをお勧めします。sass-embeddedは、SassのネイティブなDart実行ファイルのためのJavaScriptラッパーであり、優れたパフォーマンスを提供します。
html-webpack-plugin
html-webpack-plugin は、大量のHTMLファイルを生成する場合、パフォーマンスが低下します。RspackによってRustで実装されたHtmlRspackPluginは、より優れたパフォーマンスを提供できます。
Rspackプロファイル
Rspack CLIは、ビルドパフォーマンスプロファイルのためにRSPACK_PROFILE環境変数の使用をサポートしています。
このコマンドは、現在のフォルダに.rspack-profile-${timestamp}-${pid}フォルダを生成し、logging.json、trace.json、jscpuprofile.jsonファイルが含まれます。
trace.json: tracingを使用して、Rust側の各フェーズにかかった時間が詳細に記録されており、ui.perfetto.devを使用して表示できます。jscpuprofile.json: Node.js inspectorを使用して、JavaScript側の各ステージにかかった時間が詳細に記録されており、speedscope.appを使用して表示できます。logging.json: 各ビルドフェーズにかかった時間を大まかに記録した、いくつかのログ情報が含まれています。
Rsdoctorによるコンパイル分析
Rsdoctorは、各ローダーとプラグインのコンパイル時間を視覚的に表示できるビルドアナライザーです。
ローダータイムライン
ローダーとプラグインの時間コスト、またはローダーのコンパイル動作を分析する必要がある場合は、Rsdoctorを使用して表示できます。
タイムラインでは、各ローダーの実行時間とコンパイルされたファイル、および各ファイルにかかった時間を確認できます。
Loader Timelineを参照してください。
ローダーの詳細
ローダーのコンパイルプロセスを表示する場合は、Loader Detailsを使用できます。
このレポートページでは、コンパイル前後の各ファイルに対するローダーによるコード変更を確認できます。
ローダーの詳細 を参照してください。
コンパイル分析の有効化
RsdoctorRspackPlugin を有効にするには、ドキュメントを参照してください：Rsdoctor の使用。
RsdoctorRspackPluginを使用するには、features.loaderとfeatures.pluginsパラメータをtrueに設定する必要があります。デフォルトでは、features.loaderとfeatures.pluginsは有効になっています。パラメータのドキュメントはRsdoctor オプションを参照してください。- 使用方法
- ローダー分析については、ローダータイムラインとローダーの詳細を参照してください。
- プラグイン分析については、プラグイン分析を参照してください。
よくある質問
CssExtractRspackPlugin のローダーが時間がかかりすぎる
Rsdoctor を使用して Rspack プロジェクトのコンパイル時間を分析する場合、CssExtractRspackPlugin のローダーが長時間かかる場合があります。詳細と原因については、以下を確認してください。