𝗛𝗼𝘄 𝘁𝗼 𝗥𝗲𝗱𝘂𝗰𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗕𝘂𝗻𝗱𝗹𝗲 𝗦𝗶𝘇𝗲 𝗯𝘆 𝟳𝟬%

Hầu hết các ứng dụng web đều gửi quá nhiều mã. Một trang trung bình tải 1,7 MB JavaScript. Các nhà phát triển chỉ sử dụng 35% lượng mã mà họ triển khai.

Các bundle nhỏ hơn sẽ cải thiện tốc độ của bạn. Bạn sẽ cải thiện chỉ số Largest Contentful Paint và Time to Interactive.

Hãy thực hiện 10 bước sau để cắt giảm kích thước.

  1. Tree shaking Loại bỏ các export không sử dụng. Sử dụng cú pháp ES Module. Thêm "sideEffects": false vào package.json của bạn. Việc này giúp loại bỏ khoảng 18% mã không sử dụng.

  2. Code splitting Chia nhỏ mã của bạn thành các chunk nhỏ hơn.

  3. Dynamic imports Chỉ tải mã khi người dùng cần. Sử dụng lazy loading cho các route. Điều này có thể cắt giảm 28% kích thước bundle ban đầu.

  4. Image optimization Sử dụng các transform dựa trên URL từ một CDN. Ngừng sử dụng các tệp SVG inline có kích thước lớn.

  5. Dependency auditing Kiểm tra kích thước các package bằng npx bundle-phobia. • Sử dụng date-fns (13KB) thay vì moment.js (67KB). • Sử dụng lodash-es thay vì lodash. • Sử dụng dayjs (2KB) cho các ngày tháng đơn giản.

  6. Minification Loại bỏ các khoảng trắng và ký tự thừa. Hầu hết các bundler đều thực hiện việc này một cách tự động.

  7. Compression Sử dụng Brotli thay vì Gzip. Brotli giúp nén tệp tốt hơn từ 15% đến 25%.

  8. Dead code elimination Loại bỏ mã chết (dead code) - những đoạn mã mà máy tính không bao giờ có thể truy cập tới.

  9. Lazy loading components Trì hoãn việc tải các phần của trang nằm bên dưới vùng hiển thị đầu tiên (below the fold).

  10. Polyfill pruning Sử dụng @babel/preset-env. Chỉ gửi kèm các polyfill cho những trình duyệt mà người dùng của bạn thực sự sử dụng.

Hãy ngừng mắc phải những sai lầm này:

  • Triển khai các bản build dành cho phát triển (development builds). Luôn sử dụng NODE_ENV=production.
  • Import toàn bộ thư viện. Thay vào đó, hãy chỉ import các hàm cụ thể.
  • Bỏ qua bước phân tích. Sử dụng webpack-bundle-analyzer để xem các chunk lớn của bạn.
  • Quên nén tệp. Các tệp không được nén có kích thước lớn hơn gấp 5 lần so với các tệp Brotli.

Theo dõi tiến trình của bạn với các mục tiêu sau:

  • Tổng kích thước JS: Dưới 120 KB.
  • LCP: Dưới 2,5 giây.
  • TTI: Dưới 3,5 giây.

Hãy tập trung vào tree shaking, code splitting và auditing trước tiên. Ba bước này thường mang lại mức giảm từ 50% đến 70% chỉ trong một sprint.

Nguồn: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g