Tối ưu hiệu năng Frontend
1. Tối ưu kích thước bundle
1.1. Code Splitting
Tách các phần code không cần thiết trong lần tải đầu tiên.
React dùng React.lazy, Vue dùng dynamic imports.
// React
const HomePage = React.lazy(() => import("./HomePage"));
// Vue
const HomePage = () => import("./HomePage.vue");
💡 Chỉ load component khi thật sự cần → giảm bundle và tăng tốc initial load.
1.2. Tree-shaking
Hãy import đúng cách để giảm kích thước cuối cùng:
❌ Sai
import _ from "lodash";
✔️ Đúng
import debounce from "lodash/debounce";
1.3. Dùng CDN hoặc HTTP/2
Một số thư viện lớn như moment, lodash có thể load qua CDN hoặc thay thế bằng phiên bản nhẹ hơn như dayjs.
2. Tối ưu rendering
2.1. React: dùng memo hoá
const MyComponent = React.memo(function MyComponent({ value }) {
// ...
});
2.2. Vue: tránh thay đổi reactive không cần thiết
Không mutate state sâu quá nhiều, dùng computed thay vì tính toán lại trong template.
const total = computed(() => list.value.reduce((a, b) => a + b, 0));
2.3. Debounce & Throttle
Tuyệt đối nên dùng khi xử lý scroll, resize, search input.
const onSearch = debounce((value) => fetchData(value), 300);
3. Lazy-loading hình ảnh & component
Giảm thời gian tải bằng cách trì hoãn những thứ chưa cần hiển thị ngay.
<img src="image.jpg" loading="lazy" />
4. Tối ưu hoá API & Data
4.1. Cache dữ liệu
- React: SWR hoặc React Query
- Vue: Vue Query hoặc Pinia persistence
4.2. Giảm số lượng call API
- Gộp request nếu có thể
- Debounce khi search
- Prefetch khi user sắp điều hướng sang trang tiếp theo
4.3. Pagination / Infinite Scroll
Không load nguyên danh sách 5000 record trong lần đầu. Dùng pagination, cursor-based API hoặc infinite scroll.
5. Sử dụng Webpack/Vite optimization
5.1. Minify + Compress
Bật:
minifysplitChunksgziphoặcbrotli
5.2. Prefetch / Preload
<link rel="preload" href="/main.js" as="script" />
<link rel="prefetch" href="/chart.js" />
6. Tối ưu hoá CSS
- Dùng TailwindCSS hoặc CSS modules để tránh CSS dư thừa
- Purge CSS không dùng
- Hạn chế import toàn bộ thư viện UI nếu bạn chỉ dùng vài component
7. SSR hoặc SSG khi cần thiết
- React: Next.js
- Vue: Nuxt.js
Lợi ích:
- Render trước phía server
- LCP nhanh hơn
- SEO tốt hơn
- User thấy nội dung nhanh hơn
8. Theo dõi hiệu năng bằng tool
- Chrome DevTools Performance
- Lighthouse
- WebPageTest
- Sentry Performance
- Vercel Analytics
- Bundle Analyzer (Webpack) / Visualizer (Vite)
# Vite Bundle Visualizer
npm i --save-dev rollup-plugin-visualizer
Kết luận
Hiệu năng không chỉ là vấn đề kỹ thuật — nó ảnh hưởng trực tiếp đến doanh thu, trải nghiệm người dùng và khả năng giữ chân khách truy cập.
Web càng nhanh → User càng ở lại lâu → Sản phẩm càng có lợi thế.
Hãy bắt đầu tối ưu từng phần nhỏ, đo đạc, và cải thiện liên tục.
