> ## Documentation Index
> Fetch the complete documentation index at: https://inertiajs.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Code Splitting

<Warning>You are viewing the documentation for Inertia.js v2. Inertia.js v3 has been released and is now the default version. Please visit the [upgrade guide](/v3/getting-started/upgrade-guide) to get started.</Warning>

Code splitting breaks apart the various pages of your application into smaller bundles, which are then loaded on demand when visiting new pages. This can significantly reduce the size of the initial JavaScript bundle loaded by the browser, improving the time to first render.

While code splitting is helpful for very large projects, it does require extra requests when visiting new pages. Generally speaking, if you're able to use a single bundle, your app is going to feel snappier.

To enable code splitting, you will need to tweak the `resolve` callback in your `createInertiaApp()` configuration, and how you do this is different depending on which bundler you're using.

## Using Vite

Vite enables code splitting (or lazy-loading as they call it) by default when using their `import.meta.glob()` function, so simply omit the `{ eager: true }` option, or set it to `false`, to disable eager loading.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  resolve: name => {
      const pages = import.meta.glob('./Pages/**/*.vue', { eager: true }) // [!code --:2]
      return pages[`./Pages/${name}.vue`]
      const pages = import.meta.glob('./Pages/**/*.vue') // [!code ++:2]
      return pages[`./Pages/${name}.vue`]()
  },
  ```

  ```js React icon="react" theme={null}
  resolve: name => {
      const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true }) // [!code --:2]
      return pages[`./Pages/${name}.jsx`]
      const pages = import.meta.glob('./Pages/**/*.jsx') // [!code ++:2]
      return pages[`./Pages/${name}.jsx`]()
  },
  ```

  ```js Svelte icon="s" theme={null}
  resolve: name => {
      const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true }) // [!code --:2]
      return pages[`./Pages/${name}.svelte`]
      const pages = import.meta.glob('./Pages/**/*.svelte') // [!code ++:2]
      return pages[`./Pages/${name}.svelte`]()
  },
  ```
</CodeGroup>

## Using Webpack

To use code splitting with Webpack, you will first need to enable [dynamic imports](https://github.com/tc39/proposal-dynamic-import) via a Babel plugin. Let's install it now.

```bash theme={null}
npm install @babel/plugin-syntax-dynamic-import
```

Next, create a `.babelrc` file in your project with the following configuration:

```json theme={null}
{
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}
```

If you're using Laravel Mix, the dynamic imports Babel plugin is already installed and configured, and you can skip these steps. We recommend using Laravel Mix 6 or above, as there are known issues with older versions.

Finally, update the `resolve` callback in your app's initialization code to use `import`instead of `require`.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  resolve: name => require(`./Pages/${name}`), // [!code --]
  resolve: name => import(`./Pages/${name}`), // [!code ++]
  ```

  ```js React icon="react" theme={null}
  resolve: name => require(`./Pages/${name}`), // [!code --]
  resolve: name => import(`./Pages/${name}`), // [!code ++]
  ```

  ```js Svelte icon="s" theme={null}
  resolve: name => require(`./Pages/${name}.svelte`), // [!code --]
  resolve: name => import(`./Pages/${name}.svelte`), // [!code ++]
  ```
</CodeGroup>

You should also consider using cache busting to force browsers to load the latest version of your assets. To accomplish this, add the following configuration to your webpack configuration file.

```js theme={null}
output: {
    chunkFilename: 'js/[name].js?id=[chunkhash]',
}
```