From 3493b2a9e3995328fad6dabad1b2e69f513f753c Mon Sep 17 00:00:00 2001 From: Hirotaka Miyagi <31152321+MH4GF@users.noreply.github.com> Date: Mon, 21 Aug 2023 21:51:39 +0900 Subject: [PATCH] docs include profiler (#1060) * docs(cli): include --profile option * docs: fix typo in cli.md --- guide/cli.md | 4 +++- guide/troubleshooting.md | 22 ++++++++++++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/guide/cli.md b/guide/cli.md index 58d87d00..f96cb737 100644 --- a/guide/cli.md +++ b/guide/cli.md @@ -25,8 +25,9 @@ vite [root] | `--force` | オプティマイザにキャッシュを無視して再バンドルさせる (`boolean`) | | `-c, --config ` | 指定された設定ファイルを使用する (`string`) | | `--base ` | public のベースパス（デフォルト: `/`） (`string`) | -| `-l, --logLevel ` | Info \| warn \| error \| silent (`string`) | +| `-l, --logLevel ` | info \| warn \| error \| silent (`string`) | | `--clearScreen` | ログを表示する際に画面をクリアするかどうか (`boolean`) | +| `--profile` | 組み込みの Node.js インスペクタを起動する ([パフォーマンスのボトルネック](/guide/troubleshooting#パフォーマンスのボトルネック)を確認してください) | | `-d, --debug [feat]` | デバッグログを表示する (`string \| boolean`) | | `-f, --filter ` | デバッグログをフィルタリングする (`string`) | | `-m, --mode ` | env モードを設定する (`string`) | @@ -65,6 +66,7 @@ vite build [root] | `--base ` | public のベースパス（デフォルト: `/`） (`string`) | | `-l, --logLevel ` | Info \| warn \| error \| silent (`string`) | | `--clearScreen` | ログを表示する際に画面をクリアするかどうか (`boolean`) | +| `--profile` | 組み込みの Node.js インスペクタを起動する ([パフォーマンスのボトルネック](/guide/troubleshooting#パフォーマンスのボトルネック)を確認してください) | | `-d, --debug [feat]` | デバッグログを表示する (`string \| boolean`) | | `-f, --filter ` | デバッグログをフィルタリングする (`string`) | | `-m, --mode ` | env モードを設定する (`string`) | diff --git a/guide/troubleshooting.md b/guide/troubleshooting.md index bc822506..a1e26fde 100644 --- a/guide/troubleshooting.md +++ b/guide/troubleshooting.md @@ -144,6 +144,28 @@ Vite もしくはプラグインによって HMR が処理されていない場 最適化された依存関係を無効にするために使用されるハッシュキーは、パッケージロックの内容、依存関係に適用されるパッチ、およびノードモジュールのバンドルに影響を与える Vite 設定ファイルのオプションに依存します。つまり、Vite は [npm overrides](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides) のような機能を使って依存関係が上書きされたことを検出し、次のサーバー起動時に依存関係を再バンドルします。[npm link](https://docs.npmjs.com/cli/v9/commands/npm-link) のような機能を使っても、Vite は依存関係を無効化することはありません。依存関係をリンクまたはリンク解除した場合、次のサーバー起動時に `vite --force` を使って強制的に再最適化する必要があります。代わりにオーバーライドを使うことをお勧めします。オーバーライドは現在すべてのパッケージマネージャでサポートされています（[pnpm overrides](https://pnpm.io/package_json#pnpmoverrides) および [yarn resolutions](https://yarnpkg.com/configuration/manifest/#resolutions) も参照してください）。 +## パフォーマンスのボトルネック + +アプリケーションのパフォーマンスがボトルネックとなり読み込みに時間がかかる場合、Vite 開発サーバーまたはアプリケーションをビルドするときに組み込みの Node.js インスペクタを起動して CPU プロファイルを作成することができます: + +::: code-group + +```bash [dev server] +vite --profile --open +``` + +```bash [build] +vite build --profile +``` + +::: + +::: tip Vite 開発サーバー +アプリケーションをブラウザで開いたら、読み込みが終わるのを待ち、ターミナルに戻って `p` キーを押し（Node.js インスペクターを停止します）、次に `q` キーを押して開発サーバーを停止します。 +::: + +Node.js インスペクターはルートフォルダに `vite-profile-0.cpuprofile` を生成し、https://www.speedscope.app/ に遷移、`BROWSE` ボタンを使って CPU プロファイルをアップロードし、結果を検証します。 + ## その他 ### ブラウザ互換性のためにモジュールを外部化