bundle-optimization

Reduce client bundle size by applying tree-shaking, favoring named and subpath imports, and marking libraries with sideEffects: false to avoid pulling unnecessary client code.

The best way to lazy-load heavy UI components is to break up large components and load them on demand to minimize the initial payload and improve web performance.

Tree-shaking with subpath imports works by allowing you to import specific modules rather than entire libraries, actively excluding unused exports from the final client bundle.

Your bundle size increases after updating helpers because server-only helpers may have been imported into client code, or the changes introduced heavy dependencies without proper tree-shaking.

Yes, you need a bundle analyzer to measure real bundle size, as it provides the required outputs to guide decisions and verify that lazy-loading and import changes work.

You should not use lazy-loading for client bundles when the UI component is critical for initial page render, as loading it on demand will delay user experience and increase load times.