Split entry vendor modules into separate chunk #5554

The deprecated splitVendorChunkPlugin did one specific thing: it took modules inside node_modules that were reachable from entry chunks and pulled them into a shared vendor chunk. manualChunks can do the same, but the static object form (manualChunks: { vendor: [...] }) forces you to choose upfront between one big vendor chunk or one chunk per dep.

Use the function form so you control the grouping:

// vite.config.js
build: {
  rollupOptions: {
    output: {
      manualChunks(id) {
        if (id.includes('node_modules')) {
          // single shared vendor chunk (closest to the old plugin)
          return 'vendor';
        }
      }
    }
  }
}

If that single vendor chunk pulls in too much unused JS on first load, split by package instead of combining everything. Handle scoped packages:

manualChunks(id) {
  if (id.includes('node_modules')) {
    const parts = id.split('node_modules/')[1].split('/');
    const pkg = parts[0].startsWith('@') ? `${parts[0]}/${parts[1]}` : parts[0];
    return `vendor-${pkg}`;
  }
}

Two things that bite here: entryFileNames / chunkFileNames only control naming, not grouping, so leave them alone while you tune this. And keep dynamic import() boundaries in mind — anything dynamically imported already splits on its own, so forcing it into a vendor chunk can undo lazy loading. Start with the single vendor return, check the bundle visualizer, then go per-package only for the heavy deps that actually show up on the initial route.