Automatic code splitting not working as expected

[pseudo crown]

I'm using tanstack start for a project and I noticed that the automatic code splitting doesn't seem to be working as expected. In the network tab I notice it downloading components and imports that are not used in the route that the user loaded (I created a completely new empty test route to ensure its not importing anything), but components/imports from other pages are still downloaded.

For example, this userProgress component is being fetched even though it's not used on this page, and searching throughout my project I can see it's only imported in other different routes (i.e. it's not accidentally being imported in some shared component or layout).

I would expect that this component would only be fetched when loading a page that imports it, or prefetching that page (e.g. on hover for a link). But it seems that automatic code splitting is not functioning and everything is always being fetched regardless of if it is used.

I've also tried setting the tsr: { autoCodeSplitting: true } option but that made no difference (I believe this is enabled by default in tanstack start)

Any help resolving this will be much appreciated 😃

I'm struggling to work out what could be causing it though. If I clone the "start-basic" repo it seems to be working as expected. Is there a way to debug the import tree that caused specific components/imports to be included for a certain page?

[young galleon]

I think this is only in Dev mode, I noticed the same thing but in Prod it works as expected.

[zinc ravine]

yes, autoCodeSplitting is enabled by default in start

[zinc ravine]

Is there a way to debug the import tree that caused specific components/imports to be included for a certain page?

any ideas how this could look like?

we could build something but not sure what you think of here

[pseudo crown]

Some kind of tool that generates a HTML report would be super useful - For each route of your app, it creates a tree showing each chunk (file/component) that would be included

e.g.
Route "/test"

• ./test-component.tsx
  • some-library
  • some-other-component.tsx
• some-file.ts

Route "/other-route"

• some-file.ts

[zinc ravine]

doesnt this work already somehow? https://www.npmjs.com/package/vite-bundle-visualizer

[pseudo crown]

looks like that does what I'd like, although "out of the box" it doesnt seem to work

.pnpm/[email protected]/node_modules/vite-bundle-visualizer/index.js:37
  const { build } = await importVite()
          ^

TypeError: Cannot destructure property 'build' of '(intermediate value)' as it is undefined.
    at start (file:///C:/Users/Matt/AppData/Local/pnpm-cache/dlx/85ef5b9e17f9356525eac080b546b8c8c259d0155e9899d6ca8096d340363007/1962f14e850-2870/node_modules/.pnpm/[email protected]/node_modules/vite-bundle-visualizer/index.js:37:11)
    at async file:///C:/Users/Matt/AppData/Local/pnpm-cache/dlx/85ef5b9e17f9356525eac080b546b8c8c259d0155e9899d6ca8096d340363007/1962f14e850-2870/node_modules/.pnpm/[email protected]/node_modules/vite-bundle-visualizer/bin.js:48:1

[pseudo crown]

I tried doing a production build and it seems that the problem with it including stuff from my index route in the main bundle is still there - It's just not a separate request and its obfuscated so harder to notice, but searching for some string constants I can see its still including components from my index page in other pages