Angular: Esbuild always generates chunks for devtools

[arnoud-dv]

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

[imaksp]

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

[arnoud-dv]

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.

[imaksp]

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

[arnoud-dv]

@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.

[imaksp]

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.