First Load JS của trang lên 800KB. Bạn điều tra và giảm bằng cách nào?

Đo trước, sửa sau. Bật bundle analyzer để biết chunk nào nặng:

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true' })
module.exports = withBundleAnalyzer({})
// ANALYZE=true next build

Bản đồ treemap cho thấy ngay thư viện nào chiếm chỗ. Bảng tổng kết của next build cũng liệt kê First Load JS từng route.

Các cách cắt giảm, theo thứ tự hiệu quả:

Kéo component xuống server. Phần lớn bundle lớn là do 'use client' đặt quá cao trong cây. Đẩy ranh giới xuống thật sát chỗ cần tương tác — component chỉ hiển thị thì để nguyên Server Component, code của nó không đi vào bundle.
Sửa barrel import. import { Button } from '@/components' qua một index.ts re-export tất cả có thể kéo theo cả thư viện. Import thẳng đường dẫn cụ thể, hoặc khai báo optimizePackageImports cho các package UI/icon.
Đổi thư viện nặng. moment (~70KB kèm locale) đổi sang date-fns hoặc Intl có sẵn; lodash đổi sang import từng hàm.
next/dynamic cho những khối chỉ dùng khi tương tác: modal, editor, chart, bản đồ.
Kiểm tra trùng lặp. Hai phiên bản của cùng một package trong pnpm-lock nghĩa là nó bị đóng gói hai lần.

Lưu ý con số này không chỉ là dung lượng tải: mỗi KB JavaScript còn tốn thời gian parse và execute, ảnh hưởng trực tiếp tới INP trên máy yếu.

Xem toàn bộ Performance cùng filter theo level & chủ đề con.

Mở danh sách Performance

Đo trước, sửa sau. Bật bundle analyzer để biết chunk nào nặng:

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true' })
module.exports = withBundleAnalyzer({})
// ANALYZE=true next build

Bản đồ treemap cho thấy ngay thư viện nào chiếm chỗ. Bảng tổng kết của next build cũng liệt kê First Load JS từng route.

Các cách cắt giảm, theo thứ tự hiệu quả:

Kéo component xuống server. Phần lớn bundle lớn là do 'use client' đặt quá cao trong cây. Đẩy ranh giới xuống thật sát chỗ cần tương tác — component chỉ hiển thị thì để nguyên Server Component, code của nó không đi vào bundle.
Sửa barrel import. import { Button } from '@/components' qua một index.ts re-export tất cả có thể kéo theo cả thư viện. Import thẳng đường dẫn cụ thể, hoặc khai báo optimizePackageImports cho các package UI/icon.
Đổi thư viện nặng. moment (~70KB kèm locale) đổi sang date-fns hoặc Intl có sẵn; lodash đổi sang import từng hàm.
next/dynamic cho những khối chỉ dùng khi tương tác: modal, editor, chart, bản đồ.
Kiểm tra trùng lặp. Hai phiên bản của cùng một package trong pnpm-lock nghĩa là nó bị đóng gói hai lần.

Lưu ý con số này không chỉ là dung lượng tải: mỗi KB JavaScript còn tốn thời gian parse và execute, ảnh hưởng trực tiếp tới INP trên máy yếu.