Quay lại danh sách case study
Tối ưu hóa thời gian tải ứng dụng với Dynamic Import
Áp dụng code splitting và lazy loading cho ứng dụng quy mô lớn.
Bối cảnh
Bundle JavaScript chính của ứng dụng vượt quá 3MB, làm thời gian tải trang ban đầu trên mạng 3G chậm.
Vấn đề cần xử lý
Người dùng phải chờ đợi lâu trước khi thấy được màn hình đăng nhập hoặc trang chủ do toàn bộ mã nguồn được nạp cùng một lúc.
Hướng xử lý đề xuất
Sử dụng dynamic import() của ES6 kết hợp tính năng code splitting của trình đóng gói để chia nhỏ ứng dụng theo từng route và tính năng.
Câu trả lời mẫu khi phỏng vấn
Tôi đã tiến hành phân tích bundle bằng công cụ webpack-bundle-analyzer và nhận thấy nhiều thư viện bên thứ ba không cần thiết được nạp ngay từ đầu. Tôi đã cấu hình lại bằng dynamic import để tách các module quản trị và biểu đồ ra thành các chunk riêng biệt chỉ tải khi người dùng truy cập đúng đường dẫn đó.
Trade-off
Có thể gây ra độ trễ nhỏ (loading state) khi người dùng chuyển sang một route mới chưa được tải trước.
Kết quả kỳ vọng
Kích thước file bundle ban đầu giảm 60% và điểm số trên Lighthouse tăng vượt bậc.
Bài học khi trả lời phỏng vấn
Chiến lược phân phối mã nguồn theo nhu cầu sử dụng thực tế là chìa khóa để tối ưu trải nghiệm trên thiết bị di động.