Q35: How do you analyze and optimize client bundle size using @next/bundle-analyzer?
@next/bundle-analyzer visualizes the size of compiled JavaScript bundle chunks using interactive treemaps, making it easy to identify over-sized third-party packages (like lodash or moment.js) and replace them with dynamic imports or lighter alternatives.
Configuring Next Bundle Analyzer
// next.config.mjs
import withBundleAnalyzer from '@next/bundle-analyzer';
const bundleAnalyzer = withBundleAnalyzer({
enabled: process.env.ANALYZE === 'true',
});
export default bundleAnalyzer({
/* standard next config options */
});💡 Running ANALYZE=true npm run build opens bundle treemaps in the browser.
Key Takeaways
- Generates visual treemaps of client and server bundle chunks.
- Helps identify heavy libraries and target code splitting opportunities.
Knowledge Check
What visual report does @next/bundle-analyzer generate during build time?