Tối ưu hiệu năng Vue trải rộng từ kích thước bundle, hiệu quả render, đến chi phí reactivity. Dưới đây là các kỹ thuật có tác động cao nhất.
1. Code splitting / lazy loading
js
routes = [{ : , : () }];
= ( ());
Tối ưu hiệu năng Vue trải rộng từ kích thước bundle, hiệu quả render, đến chi phí reactivity. Dưới đây là các kỹ thuật có tác động cao nhất.
routes = [{ : , : () }];
= ( ());
Thắng lợi lớn nhất về tải ban đầu: đừng gửi code mà người dùng chưa cần.
<div v-show="tab === 'a'"> <!-- bật/tắt thường xuyên → lật CSS rẻ -->
<div v-if="rarelyShown"> <!-- hiếm khi render → bỏ qua việc dựng nó -->
<li v-for="item in items" :key="item.id"> <!-- cho phép tái dùng/diff DOM hiệu quả -->
import { shallowRef, shallowReactive } from "vue";
// với các object lớn mà bạn thay thế toàn bộ (hoặc instance bên thứ 3), bỏ qua tracking sâu
const bigData = shallowRef(hugeObject); // chỉ việc gán lại .value là reactive
Object.freeze(staticConfig); // dữ liệu không bao giờ đổi → không có chi phí reactivity
Reactivity sâu trên các object khổng lồ rất tốn kém; shallowRef/shallowReactive/Object.freeze tránh tracking dữ liệu không cần đến.
<p>{{ expensiveComputed }}</p> <!-- có cache, chỉ tính lại khi dependency thay đổi -->
<header v-once>{{ siteName }}</header> <!-- render một lần, không bao giờ cập nhật -->
<div v-memo="[item.id]">...</div> <!-- chỉ render lại nếu item.id thay đổi -->
Render 10.000 hàng giết chết hiệu năng → dùng vue-virtual-scroller / TanStack Virtual
để chỉ render các hàng hiển thị.
Vue DevTools (thời gian render component, tại sao một component render lại)
build output / rollup-plugin-visualizer → thành phần của bundle
Lighthouse → Core Web Vitals
Vue nhanh mặc định, nhưng các app lớn cần tối ưu có chủ đích: lazy-load để thu nhỏ bundle, chọn v-if/v-show đúng cách, dùng key ổn định, tránh reactivity quá mức trên dữ liệu lớn (shallowRef/freeze), cache với computed/v-memo, và virtualize danh sách dài.
Biết kỹ thuật nào giải quyết nút thắt nào — và đo lường bằng DevTools/Lighthouse thay vì đoán — là điều giữ cho một app Vue đang lớn dần luôn phản hồi nhanh.