bundle-splitting

Use dynamic imports or bundler code-splitting configuration to separate code into multiple bundles. Webpack and Rollup both generate separate chunk files that are loaded on demand instead of in the initial bundle.

Bundle splitting divides one large JavaScript bundle into smaller bundles so the browser loads only the code needed for the initial render. This reduces loading and execution time, improving FCP, LCP, and TTI.

Not necessarily. A bigger bundle mainly increases loading time, and it may contain code never executed on the initial render. Parsing and compilation costs are relatively small due to browser optimizations, but fetching unused code still hurts load time.

Avoid splitting when the extra code is small or always needed immediately, since additional requests add overhead. Splitting is most valuable when parts of the code are only needed for specific routes or user interactions.

A large bundle delays the point where the engine reaches the first rendering call, leaving users with a blank screen. Splitting the bundle reduces the data fetched before the first paint, speeding up FCP.