react-router/docs/explanation/code-splitting.md

Declarative routing for React

---
title: Automatic Code Splitting
---

# Automatic Code Splitting

[MODES: framework]

<br/>
<br/>

When using React Router's framework features, your application is automatically code split to improve the performance of initial load times when users visit your application.

## Code Splitting by Route

Consider this simple route config:

```tsx filename=app/routes.ts
import {
  type RouteConfig,
  route,
} from "@react-router/dev/routes";

export default [
  route("/contact", "./contact.tsx"),
  route("/about", "./about.tsx"),
] satisfies RouteConfig;
```

Instead of bundling all routes into a single giant build, the modules referenced (`contact.tsx` and `about.tsx`) become entry points to the bundler.

Because these entry points are coupled to URL segments, React Router knows just from a URL which bundles are needed in the browser, and more importantly, which are not.

If the user visits `"/about"` then the bundles for `about.tsx` will be loaded but not `contact.tsx`. This drastically reduces the JavaScript footprint for initial page loads and speeds up your application.

## Route Module Splitting

React Router can also split client-side route exports (`clientLoader`, `clientAction`, `clientMiddleware`, `HydrateFallback`) into separate chunks that can be loaded independently from the route component.

This allows these exports to be fetched and executed while the component code is still downloading, improving performance for client-side data loading.

This behavior is enabled by default. You can set `splitRouteModules` to `false` to opt out, or `"enforce"` to require all routes to be splittable. The `"enforce"` option will cause build failures for routes that cannot be split due to shared code.

```ts filename=react-router.config.ts
import type { Config } from "@react-router/dev/config";

export default {
  splitRouteModules: false,
} satisfies Config;
```

## Removal of Server Code

Any server-only [Route Module APIs][route-module] will be removed from the bundles. Consider this route module:

```tsx
export async function loader() {
  return { message: "hello" };
}

export async function action() {
  console.log(Date.now());
  return { ok: true };
}

export async function headers() {
  return { "Cache-Control": "max-age=300" };
}

export default function Component({ loaderData }) {
  return <div>{loaderData.message}</div>;
}
```

After building for the browser, only the `Component` will still be in the bundle, so you can use server-only code in the other module exports.

[route-module]: ../start/framework/route-module