Code splitting (vendor chunks) in TanStack Start + Vite 8 + Rolldown

[mariusschulz]

In the client build for a TanStack Start application (using Vite 8 and Rolldown), is there a way to configure code splitting in vite.config.ts to split out vendor chunks, e.g. bundle all imports from node_modules into their own chunk, separate from more frequently changing application code?

I tried various configuration options which work in plain rolldown-vite, but couldn't get any of them to work in TanStack Start.

[barry166]

In Start this needs to target the Vite client environment, because the Start plugin creates separate client and ssr builds.

Try putting the chunking under environments.client.build, not only top-level build:

export default defineConfig({
  environments: {
    client: {
      build: {
        rolldownOptions: {
          output: {
            manualChunks(id) {
              if (id.includes('/node_modules/')) return 'vendor'
            },
          },
        },
      },
    },
  },
  plugins: [tanstackStart(), react()],
})

The key bit is the client environment name. Start's Vite plugin wires the browser entry through that environment and the SSR build through ssr, so a config that works in a plain one-environment Vite app can miss the browser bundle in Start.

[mariusschulz]

Thanks for chiming in, @barry166. This is the exact configuration I've been using, but unfortunately I'm still not seeing a vendor chunk being created.

I've created a new repo with a minimal repro here: https://github.com/mariusschulz/tanstack-vendor-bundle

What am I missing?

[mariusschulz]

Alright, I found the issue. The problem is that TanStack's default client entry is @tanstack/react-start/dist/plugin/default-entry/client.tsx which is a file inside node_modules. A plain id.includes("/node_modules/") check matches the entry module itself.

We can work around this by excluding this specific module from the vendor bundle:

manualChunks(id) {
  if (
    id.includes("/node_modules/") &&
    !id.includes("/node_modules/@tanstack/react-start/dist/plugin/default-entry/client")
  ) {
    return "vendor";
  }
}

This issue should also go away when a custom entry module is configured:

tanstackStart({
  client: {
    entry: "client.tsx",
  },
}),

I'm still wondering whether this is worth fixing upstream somehow; this behavior was a little surprising to me.

[schiller-manuel]

fixing how?

[mariusschulz]

I'm not sure, but perhaps we could do something similar to what's already being done in createDevClientEntryPlugin?

• Virtualize the build client entry instead of aliasing it to a node_modules path
• Drop [ENTRY_POINTS.client]: client from resolve.alias
• Add a build entry plugin via createVirtualModule and load: 'import "<entry>"'
• Mark the entry moduleSideEffects: true

That way, a plain manualChunks(/node_modules/) should vendor-split as expected.

If this is too involved or not the right fix, a documentation update might go a long way too.