harsh-harlequin

Automatic code splitting not working as expected

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 😃

7 Replies

harsh-harlequinOP•5mo ago

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?

xenial-black•5mo ago

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

stormy-gold•5mo ago

yes, autoCodeSplitting is enabled by default in start

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

harsh-harlequinOP•5mo ago

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

stormy-gold•5mo ago

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

npm

vite-bundle-visualizer

Visualize vite bundle. Latest version: 1.2.1, last published: a year ago. Start using vite-bundle-visualizer in your project by running npm i vite-bundle-visualizer. There are 11 other projects in the npm registry using vite-bundle-visualizer.

harsh-harlequinOP•5mo ago

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

.pnpm/vite-bundle-visualizer@1.2.1/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/vite-bundle-visualizer@1.2.1/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/vite-bundle-visualizer@1.2.1/node_modules/vite-bundle-visualizer/bin.js:48:1

.pnpm/vite-bundle-visualizer@1.2.1/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/vite-bundle-visualizer@1.2.1/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/vite-bundle-visualizer@1.2.1/node_modules/vite-bundle-visualizer/bin.js:48:1

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

stormy-gold•5mo ago

can you share that reproducer and those strings?

Gaming

Programming

Automatic code splitting not working as expected

Did you find this page helpful?