Bundle analyzer trong Next.js được dùng như thế nào?

Dùng @next/bundle-analyzer để visualize bundle size.

• Cấu hình trong next.config.js với withBundleAnalyzer wrapper.
• Chạy ANALYZE=true npm run build để tạo report HTML.
• Giúp identify: large dependencies, duplicate code, unnecessary imports.
• Sau đó tối ưu: dynamic imports, tree-shaking, replace heavy libraries.

Use @next/bundle-analyzer to visualize bundle sizes.

• Configure it in next.config.js with the withBundleAnalyzer wrapper.
• Run ANALYZE=true npm run build to generate an HTML report.
• It helps identify: large dependencies, duplicate code, and unnecessary imports.
• Follow up by applying dynamic imports, tree-shaking, and replacing heavy libraries with lighter alternatives.