rspack-best-practices

Rspack のベストプラクティス

Rspack プロジェクトを作成またはレビューする際は、以下のルールを適用してください。

設定

• rspack.config.ts と defineConfig を使用してください
• マルチページアプリケーションでは、明示的な entry 値を定義してください
• メイン設定は 1 つにし、必要な場合に限り process.env.NODE_ENV によって分岐してください
• ルールの条件は限定的かつ明示的に指定してください（test、include、exclude、resourceQuery）
• 同等の機能がある場合は、コミュニティ製の JavaScript 代替手段よりも、Rspack 組み込みのプラグインやローダーを優先してください

CLI

@rspack/cli がインストールされている場合：

• ローカル開発には rspack dev を使用してください
• 本番ビルドには rspack build を使用してください
• rspack preview はローカルでの本番プレビューに限り使用してください

型チェック

• 開発時とビルド時に統合された型チェックを行うには、ts-checker-rspack-plugin を使用してください
• または、明示的なスクリプトの手順として tsc --noEmit／vue-tsc --noEmit を実行してください

CSS

次のいずれかの方針を選択してください。

• 最新の構成には、組み込み CSS（type: 'css' | 'css/auto' | 'css/module'）を使用してください
• webpack からの移行との互換性を保つには、css-loader + CssExtractRspackPlugin を使用してください
• スタイルを JavaScript の実行時にのみ挿入する場合は、style-loader を使用してください

任意：

• 構文のダウングレードとベンダープレフィックスの付与が目的の場合は、builtin:lightningcss-loader を使用してください
• Sass／Less ファイルの前処理には、sass-loader／less-loader を使用してください
• Tailwind CSS の統合には、@tailwindcss/webpack を使用してください

バンドルサイズの最適化

• 重要度の低いコードパスには、動的な import() を優先してください
• 可能な場合は、軽量なライブラリを優先してください
• target は、実際の互換性要件に合わせてください

アセット管理

• プロジェクトのソースディレクトリから、ソース管理対象のアセットをインポートしてください。public からはインポートしないでください
• public 内のファイルは、絶対 URL パスで参照してください
• レガシーな file-loader／url-loader／raw-loader よりも、アセットモジュール（asset、asset/resource、asset/inline、asset/source）を優先してください

プロファイリング

• JavaScript 側のオーバーヘッドが疑われる場合は、Node の CPU プロファイリング（--cpu-prof）を使用してください
• RSPACK_PROFILE=OVERVIEW を使用し、トレース出力を分析してコンパイラのフェーズにおけるボトルネックを特定してください
• 実行可能な場合は、まず既知の低速なスタック（babel-loader、PostCSS、terser）を Rspack 組み込み機能に置き換えてください

セキュリティ

• 本番用ソースマップを有効にしている場合は、.map ファイルを公開サーバーや CDN に公開しないでください

ドキュメント

• 最新（v2）のドキュメントについては、http://rspack.rs/llms.txt を参照してください
• Rspack v1 のドキュメントについては、http://v1.rspack.rs/llms.txt を参照してください