Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tree-shaking [esbuild?] bailout when importing specific icons from the main barrel entry #84

Closed
damyanpetev opened this issue Oct 7, 2024 · 0 comments · Fixed by #85
Assignees

Comments

@damyanpetev
Copy link
Member

damyanpetev commented Oct 7, 2024

There's also something going on with the extended icons - I get all of them bundled, which makes no sense and there might be an additional issue there as well.
Edit: Yeah, there seems to be an issue with the icons exports as they stand atm.
Even a simple import { contains } from '@igniteui/material-icons-extended'; will pull the entire package it seems:
image
That's with the Bundle test app that uses the default application builder. Possibly related to angular/angular-cli#26622, though not exactly as everything shakes out fine if the 'all' category is not exported from the main barrel.
Originally posted by @damyanpetev in IgniteUI/igniteui-angular#14859 (comment)

The issues I can dig up mention using rollup's preserveModules but that's already on, so not entirely sure where the issue lies, only have the observational solution. Still, Angular's build is using ESBuild and whereever that lands in the pipeline it does seem to have some issues with barrels as linked above. We've observed some issues with spreading exports in groups in the library, though I can't find a specific issue for that.

Repro:

iconTreeShake.zip

  1. Run npm run build
  2. Inspect the size of the main chunk
  3. Optionally use npx source-map-explorer .\dist\icon-tree-shake\browser\main-<hash>.js

Results:

Initial chunk files   | Names         |  Raw size | Estimated transfer size
main-BDF36OCQ.js      | main          | 282.06 kB |                75.36 kB
polyfills-FFHMD2TL.js | polyfills     |  34.52 kB |                11.28 kB
styles-5INURTSO.css   | styles        |   0 bytes |                 0 bytes
                      | Initial total | 316.58 kB |                86.64 kB

image

However, if you swap the icons import to @igniteui/material-icons-extended/editor:

Initial chunk files   | Names         | Raw size | Estimated transfer size
polyfills-Q763KACN.js | polyfills     | 34.57 kB |                11.36 kB
main-UVXCVJN4.js      | main          |  1.91 kB |               707 bytes
styles-ZUISL3KO.css   | styles        | 48 bytes |                48 bytes
                      | Initial total | 36.52 kB |                12.11 kB

image

Noticed the same happens if I just comment out the all export from the main entry. Which makes me think if that is also split into a separate entry and only re-exports from the main one, it might keep the exports the same but avoid the bailout.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants