Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs include profiler #1060

Merged
merged 2 commits into from
Aug 21, 2023
Merged

docs include profiler #1060

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
93bf9ed
docs(cli): include --profile option
MH4GF Aug 20, 2023
4df270e
docs: fix typo in cli.md
MH4GF Aug 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion guide/cli.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,9 @@ vite [root]
| `--force` | オプティマイザにキャッシュを無視して再バンドルさせる (`boolean`) |
| `-c, --config <file>` | 指定された設定ファイルを使用する (`string`) |
| `--base <path>` | public のベースパス（デフォルト: `/`） (`string`) |
| `-l, --logLevel <level>` | Info \| warn \| error \| silent (`string`) |
| `-l, --logLevel <level>` | info \| warn \| error \| silent (`string`) |
| `--clearScreen` | ログを表示する際に画面をクリアするかどうか (`boolean`) |
| `--profile` | 組み込みの Node.js インスペクタを起動する ([パフォーマンスのボトルネック](/guide/troubleshooting#パフォーマンスのボトルネック)を確認してください) |
| `-d, --debug [feat]` | デバッグログを表示する (`string \| boolean`) |
| `-f, --filter <filter>` | デバッグログをフィルタリングする (`string`) |
| `-m, --mode <mode>` | env モードを設定する (`string`) |
Expand Down Expand Up @@ -65,6 +66,7 @@ vite build [root]
| `--base <path>` | public のベースパス（デフォルト: `/`） (`string`) |
| `-l, --logLevel <level>` | Info \| warn \| error \| silent (`string`) |
| `--clearScreen` | ログを表示する際に画面をクリアするかどうか (`boolean`) |
| `--profile` | 組み込みの Node.js インスペクタを起動する ([パフォーマンスのボトルネック](/guide/troubleshooting#パフォーマンスのボトルネック)を確認してください) |
| `-d, --debug [feat]` | デバッグログを表示する (`string \| boolean`) |
| `-f, --filter <filter>` | デバッグログをフィルタリングする (`string`) |
| `-m, --mode <mode>` | env モードを設定する (`string`) |
Expand Down
22 changes: 22 additions & 0 deletions guide/troubleshooting.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 プロファイルをアップロードし、結果を検証します。

## その他

### ブラウザ互換性のためにモジュールを外部化
Expand Down
Loading