Vue アプリケーションのパフォーマンスを最適化するにはどうしますか？

Question

Accepted Answer

Vue のパフォーマンス最適化は、バンドルサイズ、レンダリング効率、リアクティビティコストにわたります。最も影響の大きいテクニックは以下の通りです。 ## 1. Code splitting / lazy loading ```js // lazy-load routes and heavy components → smaller initial bundle const routes = [{ path: "/admin", component: () => import("./Admin.vue") }]; const Chart = defineAsyncComponent(() => import("./Chart.vue")); ``` 初期ロードで最大の効果が得られるのは、ユーザーがまだ必要としていないコードを配信しないことです。 ## 2. v-show と v-if を適切に使い分ける ```vue

``` ## 3. v-for では常に安定した :key を使う ```vue

``` ## 4. 不要なリアクティビティを避ける ```js 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` を使うことで、追跡する必要のないデータの追跡を回避できます。 ## 5. 派生値には methods ではなく computed (キャッシュ) を使う ```vue

``` ## 6. 静的またはめったに変わらないコンテンツには v-once / v-memo を使う ```vue

...

``` ## 7. 長いリストを仮想化する ```text Rendering 10,000 rows kills performance → use vue-virtual-scroller / TanStack Virtual to render only the visible rows. ``` ## 8. 画像を最適化し、first paint に対して SSR/SSG (Nuxt) を検討する ## 測定 ```text 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 アプリケーションの応答性を保つ鍵となります。