query icon indicating copy to clipboard operation
query copied to clipboard

Published 20 hours ago • verified publisher icon TanStack

Angular: Esbuild always generates chunks for devtools

Open arnoud-dv opened this issue 7 months ago • 5 comments

Describe the bug

The Angular Query devtools are lazy loaded to optimize startup performance of the app while developing and to minimize bundle sizes.

However, even if the code that performs the lazy load is tree shaken, esbuild wil generate unnessary chunks adding to application deployment size.

Your minimal, reproducible example

https://tanstack.com/query/latest/docs/framework/angular/examples/basic

Steps to reproduce

  • Go to the linked Stackblitz
  • Remove withDevtools from app.config.ts
  • Open the terminal and run npm run build
  • The Angular CLI will now perform an optimized production build
  • Note several lazy chunk files are generated even though there is no reference to withDevtools in the application

Expected behavior

No chunks should be generated for devtools if they are not used

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

N/a

Tanstack Query adapter

angular-query

TanStack Query version

v5.74.7

TypeScript version

No response

Additional context

PR in progress

arnoud-dv avatar Apr 28 '25 11:04 arnoud-dv

Hi, did you find reason for this, I also have similar issue with one esm package (which depends on some commonjs modules).

imaksp avatar Jun 07 '25 05:06 imaksp

Hi, did you find reason for this, I also have similar issue with one esm package (which depends on some commonjs modules).

Yes, generating lazy chunks seems to be a separate process from tree shaking in EsBuild. So even when code is tree shaken lazy chunks may still be generated for async imports in the tree shaken code. This does not always happen. The simpler any branching code the better tree shaking and skipping async imports works.

arnoud-dv avatar Jun 07 '25 15:06 arnoud-dv

Ok, good to know, in my case, I can't remove async import as it could increase initial bundle size.

imaksp avatar Jun 09 '25 12:06 imaksp

@imaksp Depending on your use case you could look at subpath and or conditional exports as in the linked PR that will fix this issue. I found it to be the most reliable solution.

arnoud-dv avatar Jun 11 '25 21:06 arnoud-dv

Hi, yes this is good solution, but in my case its coming from third party lib, they export all connectors from single file like this: https://github.com/wevm/wagmi/blob/main/packages/connectors/src/exports/index.ts

so either Angular bundler should tree shake dynamic imports or lib author need to add subpath exports.

imaksp avatar Jun 12 '25 05:06 imaksp