Code Splitting

By default, Inertia lazy-loads page components, splitting each page into its own bundle that is loaded on demand. This reduces the initial JavaScript bundle size but requires additional requests when visiting new pages. You may disable lazy loading to eagerly bundle all pages into a single file. Eager loading eliminates per-page requests but increases the initial bundle size.

Vite Plugin

The lazy option in the pages shorthand controls how page components are loaded. It defaults to true.

createInertiaApp({
    pages: {
        lazy: false, // Bundle all pages into a single file
    },
    // ...
})

Manual Vite

You may configure code splitting manually using Vite’s import.meta.glob() function when not using the Inertia Vite plugin. Pass { eager: true } to bundle all pages, or omit it to lazy-load them.

resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue') 
    return pages[`./Pages/${name}.vue`]()
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true }) 
    return pages[`./Pages/${name}.vue`]
},

resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.jsx') 
    return pages[`./Pages/${name}.jsx`]()
    const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true }) 
    return pages[`./Pages/${name}.jsx`]
},

resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.svelte') 
    return pages[`./Pages/${name}.svelte`]()
    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true }) 
    return pages[`./Pages/${name}.svelte`]
},

Webpack

To use code splitting with Webpack, enable dynamic imports with a Babel plugin:

npm install @babel/plugin-syntax-dynamic-import

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

{
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

If you’re using Laravel Mix, the Babel plugin for dynamic imports is already installed and configured, and you can skip these steps. We recommend using Laravel Mix 6 or later, 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.

resolve: name => require(`./Pages/${name}`), 
resolve: name => import(`./Pages/${name}`), 

resolve: name => require(`./Pages/${name}`), 
resolve: name => import(`./Pages/${name}`), 

resolve: name => require(`./Pages/${name}.svelte`), 
resolve: name => import(`./Pages/${name}.svelte`), 

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.

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

Getting Started

Installation

Core Concepts

The Basics

Data & Props

Security

Advanced

Vite Plugin

Manual Vite

Webpack

​Vite Plugin

​Manual Vite

​Webpack

Vite Plugin

Manual Vite

Webpack