Vite has removed automatic vendor chunking.

You can still use this feature by applying the following to your vite.config.js file :

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

export default defineConfig({
  plugins: [
      laravel({ ... }),
      vue({ ... }),
      splitVendorChunkPlugin(),
  ],
});

If you're using Vite, here's a full working app.js file with code-splitting and dynamic imports turned on or off based on the enableCodeSplitting flag that I have defined. I hope this helps!

import { createApp, h } from 'vue'
import { createInertiaApp, Head } from '@inertiajs/vue3'
import Layout from './Shared/Layout.vue'

// Needed to enable code-splitting (or lazy-loading) using Vite
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

// See https://inertiajs.com/code-splitting
// Code splitting (or lazy-loading) 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
let enableCodeSplitting = true

createInertiaApp({
  // If using Vite instead of Webpack / Laravel Mix, the resolve function may look something like this
  resolve: (name) => enableCodeSplitting ?

    // Enable code-splitting (or lazy-loading) using Vite
    // Note: When you run `npm run build` (which in turn calls `vite build`), it will output many smaller JavaScript bundles, which are then loaded on demand when visiting new pages
    // asynchronous callback, can either use async-await format or the .then() format, as shown below
    resolvePageComponent(
      `./Pages/${name}.vue`,
      import.meta.glob('./Pages/**/*.vue', { eager: false })
    )
    .then((module) => {
      let page = module;
      if (!page.default.layout) {
        // Set the default layout for all page components that don't have a layout set
        // Without this check, we will overwrite the page's layout, which we don't want to do
        page.default.layout = Layout
      }
      return page;
    })
    :
    // Disable code-splitting / Enable eager-loading (opposite of lazy-loading / code-splitting)
    // Note: When you run `npm run build` (which in turn calls `vite build`), it will output one large JavaScript bundle
    (function() {
      const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
      let page = pages[`./Pages/${name}.vue`]

      if (!page.default.layout) {
        // Set the default layout for all page components that don't have a layout set
        // Without this check, we will overwrite the page's layout, which we don't want to do
        page.default.layout = Layout
      }
      return page
    })(),

  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },

})