Code splitting

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'll 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.

Vue

// frontend/entrypoints/inertia.js
createInertiaApp({
    resolve: (name) => {
        const pages = import.meta.glob("../pages/**/*.vue", { eager: true }); 
        return pages[`../pages/${name}.vue`]; 
        const pages = import.meta.glob("../pages/**/*.vue"); 
        return pages[`../pages/${name}.vue`](); 
    },
    //...
});

React

// frontend/entrypoints/inertia.js
createInertiaApp({
    resolve: (name) => {
        const pages = import.meta.glob("../pages/**/*.jsx", { eager: true }); 
        return pages[`../pages/${name}.jsx`]; 
        const pages = import.meta.glob("../pages/**/*.jsx"); 
        return pages[`../pages/${name}.jsx`](); 
    },
    //...
});

Svelte 4, Svelte 5

// frontend/entrypoints/inertia.js
createInertiaApp({
    resolve: (name) => {
        const pages = import.meta.glob("../pages/**/*.svelte", { eager: true }); 
        return pages[`../pages/${name}.svelte`]; 
        const pages = import.meta.glob("../pages/**/*.svelte"); 
        return pages[`../pages/${name}.svelte`](); 
    },
    //...
});