Really cool stuff! Thanks @jeffreyway

For the Vite folks, here is what I have for the inertia demo project now

For vite (current version) there is splitVendorChunkPlugin

import { defineConfig, splitVendorChunkPlugin } from "vite";
import vue from "@vitejs/plugin-vue";
import laravel from "laravel-vite-plugin";

const path = require("path");

export default defineConfig({
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./resources/js"),
        },
        extensions: [".vue", ".js"], //leave off extensions on imports
    },
    plugins: [
        vue(),
        laravel({
            input: ["resources/js/app.js"],
            refresh: true,
        }),
        splitVendorChunkPlugin(),
    ],
});

app.js I'm using a separate AuthLayout component for the login page so I never made the change to check if layout is undefined like in the course. Also added .then and catch because createInertiaApp returns a promise. PHPStorm complains about it plus I get console errors.

import "./bootstrap";
import "../css/app.css";
import { createApp, h } from "vue";
import { createInertiaApp, Link } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import AppLayout from "@/Layout/AppLayout";

createInertiaApp({
    resolve: async (name) => {
        const page = (
            await resolvePageComponent(
                `./Pages/${name}.vue`,
                import.meta.glob("./Pages/**/*.vue")
            )
        ).default;

        page.layout ??= AppLayout;

        return page;
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .component("Link", Link)
            .mount(el);
    },
})
    .then(() => {
        InertiaProgress.init({
            color: "blue",
            showSpinner: true,
        });
    })
    .catch((e) => {
        console.error(`Ah Crap! ${e.message}`);
    });

I also used defineAsyncComponent for the Nav component since it is only included in the Layout file. Once it loads for the Home page it's already loaded for the rest.

Here's my output for dev build

vite v3.1.4 building for production...
✓ 176 modules transformed.
public/build/manifest.json                   2.87 KiB
public/build/assets/app.a65b1ade.js          2.65 KiB / gzip: 1.29 KiB
public/build/assets/Login.36f19d37.js        2.45 KiB / gzip: 1.20 KiB
public/build/assets/AppHead.90d52e81.js      0.31 KiB / gzip: 0.25 KiB
public/build/assets/InputError.25386032.js   0.29 KiB / gzip: 0.24 KiB
public/build/assets/Home.b2d792dc.js         0.52 KiB / gzip: 0.37 KiB
public/build/assets/Index.033bd779.js        0.40 KiB / gzip: 0.29 KiB
public/build/assets/Create.9320e6d4.js       2.55 KiB / gzip: 1.11 KiB
public/build/assets/Index.b319b48d.js        3.54 KiB / gzip: 1.76 KiB
public/build/assets/BtnLink.27419b9c.js      0.72 KiB / gzip: 0.47 KiB
public/build/assets/Nav.5ba2534e.js          0.83 KiB / gzip: 0.43 KiB
public/build/assets/Pagination.8e80881d.js   0.54 KiB / gzip: 0.39 KiB
public/build/assets/app.22d817f7.css         12.78 KiB / gzip: 3.26 KiB
public/build/assets/vendor.fc267e41.js       278.86 KiB / gzip: 100.20 KiB

Code Splitting Strategies