mcpField
R
rsbuild-best-practices

rsbuild-best-practices

github.com/rstackjs開発972.8k 回インストール6 日前に更新
リポジトリ

rsbuild-best-practices について

rsbuild-best-practices は、Rsbuild プロジェクトの作成とレビューに関するガイドを提供するスキルです。設定、CLI、型チェック、アセット管理、デバッグ、セキュリティ、性能分析を扱います。

主な機能

  1. 01Rsbuildの設定ガイド
  2. 02開発・ビルドCLIの使い方
  3. 03型チェックの推奨事項
  4. 04アセットとsource mapの運用
  5. 05デバッグと性能分析の方法

活用シーン

  1. 01複数ページのRsbuildプロジェクトの設定
  2. 02開発やビルドへの型チェック導入
  3. 03バンドル、設定、コンパイラーの問題調査

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/rstackjs/agent-skills --skill rsbuild-best-practices

インストール後、Claude Code で/rsbuild-best-practicesを入力して読み込まれたか確認します。

詳細

Rsbuild のベストプラクティス

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

設定

  • rsbuild.config.ts と defineConfig を使用します
  • Rsbuild の標準オプションで対応できない場合に限り、tools.rspack または tools.bundlerChain を使用します
  • マルチページアプリケーションでは、source.entry の値を明示的に指定します
  • TypeScript プロジェクトでは、まず tsconfig.json のパスエイリアスを優先します

CLI

  • ローカル開発には rsbuild を使用します
  • 本番ビルドには rsbuild build を使用します
  • rsbuild preview はローカルでの本番プレビューにのみ使用します
  • 最終的な Rsbuild／Rspack の設定を確認するには、rsbuild inspect を使用します

型チェック

  • 開発時とビルド時に型チェックを統合するには、@rsbuild/plugin-type-check を使用します
  • または、明示的なスクリプトのステップとして tsc --noEmit／vue-tsc --noEmit を実行します

バンドルサイズの最適化

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

アセット管理

  • プロジェクトのソースディレクトリから、ソース管理対象のアセットをインポートします。public からはインポートしません
  • public のファイルは絶対 URL パスで参照します

セキュリティ

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

デバッグ

  • 設定の解決やプラグインの動作を調査する場合は、DEBUG=rsbuild を指定して実行します
  • 想定上の設定ではなく、生成された dist/.rsbuild 内のファイルを読み、最終的な設定を確認します

プロファイリング

  • JavaScript 側のオーバーヘッドが疑われる場合は、Node の CPU プロファイリング（--cpu-prof）を使用します
  • RSPACK_PROFILE=OVERVIEW を使用し、トレース出力を分析してコンパイラーの各フェーズのボトルネックを特定します

ドキュメント

コメント

Markdown 対応