Vue のパフォーマンス最適化は、バンドルサイズ、レンダリング効率、リアクティビティコストにわたります。最も影響の大きいテクニックは以下の通りです。
1. Code splitting / lazy loading
js
// lazy-load routes and heavy components → smaller initial bundle
const routes = [{ : , : () }];
= ( ());
Vue のパフォーマンス最適化は、バンドルサイズ、レンダリング効率、リアクティビティコストにわたります。最も影響の大きいテクニックは以下の通りです。
// lazy-load routes and heavy components → smaller initial bundle
const routes = [{ : , : () }];
= ( ());
初期ロードで最大の効果が得られるのは、ユーザーがまだ必要としていないコードを配信しないことです。
<div v-show="tab === 'a'"> <!-- toggled often → cheap CSS flip -->
<div v-if="rarelyShown"> <!-- rarely rendered → skip building it -->
<li v-for="item in items" :key="item.id"> <!-- enables efficient DOM reuse/diffing -->
import { shallowRef, shallowReactive } from "vue";
// for large objects you replace wholesale (or 3rd-party instances), skip deep tracking
const bigData = shallowRef(hugeObject); // only .value reassignment is reactive
Object.freeze(staticConfig); // never-changing data → no reactivity overhead
大規模オブジェクトの深いリアクティビティはコストがかかります。shallowRef/shallowReactive/Object.freeze を使うことで、追跡する必要のないデータの追跡を回避できます。
<p>{{ expensiveComputed }}</p> <!-- cached, recomputes only on dependency change -->
<header v-once>{{ siteName }}</header> <!-- render once, never update -->
<div v-memo="[item.id]">...</div> <!-- re-render only if item.id changes -->
Rendering 10,000 rows kills performance → use vue-virtual-scroller / TanStack Virtual
to render only the visible rows.
Vue DevTools (component render timings, why a component re-rendered)
build output / rollup-plugin-visualizer → bundle composition
Lighthouse → Core Web Vitals
Vue はデフォルトで高速ですが、大規模なアプリケーションには意図的な最適化が必要です。lazy-load でバンドルを縮小し、v-if/v-show を正しく選択し、安定したキーを使用し、大規模データに対する過度なリアクティビティを避け (shallowRef/freeze)、computed/v-memo でキャッシュし、長いリストを仮想化します。
どのテクニックがどのボトルネックに対応するのかを知り、推測ではなく DevTools/Lighthouse で測定することが、成長する Vue アプリケーションの応答性を保つ鍵となります。
ジュニアからシニアまで、詳細な回答付きのIT面接質問ライブラリ。
寄付する