Make it possible to group chunks

[dmmikkel]

Currently every route becomes it's own chunk. I would like to have a set of lazy routes become a single chunk.

I could do manual chunks, but the file names of the chunks don't have enough information for me to determine which route generated the chunk.

Given this setup:

• _root.tsx
• index.tsx
• /user/login.async.tsx
• /user/register.async.tsx
• ...

I would like an easy way to make everything under /user/ become a single chunk.

The benefit would be that you only load the modules you enter, but once you enter a module, you don't need to wait for every single route to load when navigating.

[schiller-manuel]

We currently don't have a "nice" way of "grouping chunks", but we are looking into this.
Any idea how that API could look like, considering that one might want to configure multiple groups etc?

However, I think you can use manual chunks already today.

The following should create two bundles, one for the /users subtree and another one for everything else.

export default defineConfig({
  plugins: [
    TanStackRouterVite({
      autoCodeSplitting: true,
    }),
    react(),
  ],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('users') && id.includes('?tsr-split')) {
            return 'users'
          }
          return 'other'
        },
      },
    },
  },
})

[dmmikkel]

I don't mind doing it manually like this. However it is hard with the chunk names now generated.

dist/assets/index.lazy-AWZ6Djul.js                     2.29 kB │ gzip:   1.07 kB
dist/assets/form.lazy-DLax1x0w.js                      2.32 kB │ gzip:   0.99 kB
dist/assets/route.lazy-DFU1SbCs.js                     2.52 kB │ gzip:   1.20 kB

I have no information about which path they are on. Maybe lazy routes could have a "chunkPostfix" or some config that I could then target in manualChunks?

[schiller-manuel]

anything is possible. as I wrote above, if you have API proposals, tell me in detail.