Bundle JavaScript 2MB. Bạn giảm bằng cách nào?

Về thư viện, ba thủ phạm quen mặt: moment.js kéo theo toàn bộ locale (thay bằng date-fns hoặc Intl có sẵn trong trình duyệt), import _ from 'lodash' kéo cả thư viện thay vì một hàm, và các bộ icon nhập kiểu import { Icon } from 'lib' mà thư viện không có tree shaking. Kiểm tra nhanh: xem package.json của thư viện có "sideEffects": false và có bản ESM không — thiếu một trong hai là tree shaking gần như không làm được gì.

Chia code hiệu quả nhất theo hai trục. Theo route là hiển nhiên: trang thanh toán không cần code của trang quản trị. Theo TƯƠNG TÁC thì ít người làm hơn mà lợi ích lớn: trình soạn thảo rich text, thư viện biểu đồ, bản đồ — tất cả đều nạp được lúc người dùng bấm mở, không phải lúc tải trang. Một biểu đồ nặng 300KB mà 90% người dùng không cuộn tới là 300KB tải vô ích.

Điều cần cẩn thận là chia quá nhỏ cũng có giá: mỗi chunk là một request, và với HTTP/2 thì rẻ hơn nhưng không miễn phí — vẫn có chi phí phân tích và chi phí xử lý phụ thuộc. Ngưỡng thực dụng là đừng tạo chunk dưới khoảng 20KB; gộp những cái nhỏ lại thường nhanh hơn tách ra.