Vue DevToolsのPerformanceタブでプロファイリング
コンポーネント更新の記録、不要な再レンダリングの特定、コンポーネントの処理時間
「Vue DevToolsのPerformanceタブでプロファイリング」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
プロファイリングする理由
最適化の前に、時間がどこで使われているかを把握する必要があります。Vue DevToolsには、コンポーネントのレンダーを記録するパフォーマンス／タイムラインビューがあり、推測ではなく無駄な処理を見つけられます。
Vue DevToolsのインストール
ブラウザー拡張機能をインストールするか、スタンドアロンアプリを実行します。Viteプロジェクトでは、vite-plugin-vue-devtoolsプラグインによってアプリ内インスペクターが追加されます。
npm install -D vite-plugin-vue-devtools記録を開始する
DevToolsのタイムライン／パフォーマンスタブを開いて記録を開始し、アプリを操作します。記録を停止すると、その時間帯のレンダー活動を取得できます。
コンポーネントのレンダータイムライン
各コンポーネントのレンダーはタイムライン上のイベントとして表示されます。コンポーネントがいつ再レンダーされ、レンダーにどれだけ時間がかかったかを確認できます。
コミットグラフ
コミットとは、DOMへの更新を一括反映する1回の処理です。コミットグラフには各コミットと、その中でレンダーされたコンポーネントが表示されるため、予想以上に多くのコンポーネントに影響するコミットを見つけられます。
コンポーネント処理時間のフレームチャート
フレームチャートには、親と子のレンダー時間が積み重ねて表示されます。幅の広いバーは遅いレンダーを、深いスタックはツリー全体にレンダーが連鎖していることを示します。
無駄なレンダーを特定する
無駄なレンダーとは、再レンダーしたものの同じ出力を生成したコンポーネントです。結果としてDOMが変化しなかった、繰り返し発生するレンダーイベントとして表示されます。
同じ出力、新しいレンダリング
よくある原因は、各レンダリングで新しく作成したオブジェクトやインラインのアロー関数を props として渡し、メモ化を無効にしてしまうことです。表示される出力がまったく同じでも、子コンポーネントは再レンダリングされます。
<!-- new object every parent render forces child update -->
<Child :config="{ mode: 'a' }" />安定した参照で修正する
定数を外部に定義するか、派生データを computed でラップして、レンダリング間で同じ参照が渡されるようにします。
const config = { mode: "a" };
// or: const config = computed(() => ({ mode: mode.value }));インタラクションとの相関を確認する
タイムラインにはマウスイベントとキーボードイベントも記録されます。時間のかかったコミットと、それを引き起こしたインタラクションを対応付けると、最適化すべき正確なコードパスを見つけられます。
コンポーネントインスペクターのレンダリング回数
コンポーネントインスペクターでは、更新されたコンポーネントを強調表示できます。関係のない状態変更のたびにカウンターが点滅する様子を確認すれば、過剰なレンダリングをすぐに見抜けます。
クイックチェック
パフォーマンスタブのコミットグラフは何を表していますか？
まとめ
Vue DevTools のパフォーマンス／タイムラインタブを使ってレンダリングを記録します。コミットグラフには各 DOM フラッシュと、そこでレンダリングされたコンポーネントが表示され、フレームチャートからは時間のかかるレンダリングがわかります。出力が変わっていないのに再レンダリングされるコンポーネント、つまり無駄なレンダリングを探してください。これは不安定な props の参照が原因であることが多く、定数を外部に定義するか computed を使って修正できます。
よくある質問
「Vue DevToolsのPerformanceタブでプロファイリング」レッスンは無料ですか？
はい。「Vue DevToolsのPerformanceタブでプロファイリング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「Vue DevToolsのPerformanceタブでプロファイリング」で何を学びますか？
コンポーネント更新の記録、不要な再レンダリングの特定、コンポーネントの処理時間 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「Vue DevToolsのPerformanceタブでプロファイリング」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- テンプレートメモ化のためのv-memo
- Vue DevToolsのPerformanceタブでプロファイリング
- 大規模リストの仮想スクロール
- VueでのWeb Worker