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:

• minify
• splitChunks
• gzip hoặc brotli

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.