📘 BÀI 25: TỐI ƯU VỚI LAZY LOAD ROUTE VÀ COMPONENT

Tối ưu hiệu năng – Lazy Load Route và Component trong Vue. Đây là bước quan trọng khi ứng dụng bạn đã lớn và cần:

• Tăng tốc độ tải trang lần đầu
• Giảm kích thước bundle chính
• Tối ưu trải nghiệm người dùng trên thiết bị yếu

Mục tiêu

• Tách các route lớn (login, account, admin) ra thành lazy load
• Tối ưu component bằng defineAsyncComponent
• Hiểu cách chia chunk và giảm tải initial bundle
• Kiểm tra hiệu quả sau khi build

Phần 1: Lazy Load Route với Vue Router

Mở file src/router/index.js
Thay vì import toàn bộ:

📋 Copyimport LoginView from '@/views/LoginView.vue'

Chuyển thành:

📋 Copyconst LoginView = () => import('@/views/LoginView.vue')

Toàn bộ route:

📋 Copyconst routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/HomeView.vue')
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/LoginView.vue')
  },
  {
    path: '/account',
    name: 'account',
    component: () => import('@/views/AccountView.vue')
  },
  {
    path: '/admin',
    name: 'admin',
    component: () => import('@/views/AdminTodos.vue')
  }
]

Khi bạn chạy vite build, mỗi view sẽ được tách riêng thành file .js riêng, chỉ tải khi cần.

Phần 2: Lazy Load component nặng

Ví dụ: component ToastNotification.vue có thể load trễ

Tại App.vue:

📋 Copy<script setup>
import { defineAsyncComponent } from 'vue'

const ToastNotification = defineAsyncComponent(() =>
  import('./components/ToastNotification.vue')
)
</script>

Component này sẽ được tải khi render đến, không phải từ đầu.

Phần 3: Kiểm tra sau khi build

Chạy:

📋 Copynpm run build

Sau đó kiểm tra thư mục dist/ → bạn sẽ thấy:

• index.html
• Một file chính assets/index.[hash].js
• Các chunk khác tương ứng từng route (mỗi file ~2-5 KB)

Bạn có thể dùng https://bundlephobia.com/ hoặc bật chế độ devtool của trình duyệt → tab Network → JS để thấy rõ tác dụng lazy load.

Bạn đã học được

• Tối ưu route với dynamic import
• Lazy load component nặng
• Tối ưu hiệu suất khi build
• Giảm kích thước tải lần đầu → giúp app chạy mượt hơn

Bài tập mở rộng

1. Kết hợp suspense để tạo hiệu ứng loading khi chờ component load
2. Lazy load toàn bộ phần admin (giao diện + route riêng)
3. Tách pinia store thành module riêng (nếu lớn)