frontend-bundle-size

Reduce bundle size in a React or Next.js app by replacing barrel file imports with direct module imports, and moving heavy components behind dynamic import() or React.lazy with client-side SSR guards to prevent bundling.

Importing from barrel files increases frontend bundle size because barrel files re-export entire libraries, forcing bundlers to pull large unused re-exported modules into the client payload instead of just the required components.

The best way to lazy load heavy modules in Next.js without breaking SSR is using dynamic import() or React.lazy with Suspense and client-side guards, ensuring the heavy modules are excluded from server-side bundling and loaded on demand.

Implement intent-based preloading for dynamic imports by triggering module fetching on user interactions like hover or focus, or during feature-flag activation, improving perceived performance without inflating the initial payload.

Yes, code-splitting with React.lazy works for optimizing large UI library imports by moving heavy modules like @mui/material behind dynamic import() and replacing barrel imports to reduce dev boot time, build size, and cold starts.

You should avoid dynamic import() for tree-shaking when a direct module import is sufficient, as adding unnecessary dynamic splitting for lightweight packages can complicate loading patterns without significantly reducing bundle size.