code-splitting

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Automatic code splitting by route in React Router

When using React Router's framework features, your application is automatically code split to improve initial load times. Each route in the route config becomes an entry point to the bundler. React Router knows from a URL which bundles are needed in the browser and which are not. If a user visits a specific URL, only the bundles for that route are loaded, drastically reducing the JavaScript footprint for initial page loads.

Route module splitting in React Router

React Router can split client-side route exports (clientLoader, clientAction, clientMiddleware, HydrateFallback) into separate chunks that load independently from the route component. This allows these exports to be fetched and executed while the component code is downloading, improving performance for client-side data loading. This behavior is enabled by default.

splitRouteModules configuration option

The splitRouteModules option in react-router.config.ts controls route module splitting behavior. Setting it to false disables route module splitting. Setting it to "enforce" requires all routes to be splittable and causes build failures for routes that cannot be split due to shared code. The default is true (enabled).

Server code removal from browser bundles

Server-only Route Module APIs (such as loader, action, and headers exports) are automatically removed from browser bundles during the build process. Only the component export and client-side exports remain in the bundle, allowing developers to use server-only code in loader and action functions without it being included in the client-side JavaScript.

Route config example with code splitting

In React Router's framework mode, routes are defined in app/routes.ts with route() calls that reference component files. Each route file becomes a separate entry point for the bundler, enabling automatic code splitting by URL segment.

.client modules exclude from server bundles

.client modules are client-only modules that are excluded from server bundles.

Lazy load route modules with convert function

Instead of importing route modules directly, use lazy: () => import("./routes/path").then(convert) to lazy load and convert route modules to the format expected by the data router. This provides code-splitting benefits.

future.v8_splitRouteModules enables independent chunk loading

This feature splits client-side route exports (clientLoader, clientAction, clientMiddleware, HydrateFallback) into separate chunks that load independently from route component. This allows these exports to be fetched and executed while component code is still downloading, improving performance. Can be set to true for opt-in behavior or 'enforce' to require all routes be splittable.

Enable future.v8_splitRouteModules

In react-router.config.ts, add: export default { future: { v8_splitRouteModules: true } } satisfies Config;

future.v8_splitRouteModules requires no code changes

This is an optimization feature that works automatically once enabled. No code changes are required.

Give your agent this brain