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
bug: bundle size increase with IonicModule and lazy loaded web components in v8.0.1 #29393
Comments
Hello @StefanNedelchev, I am unable to reproduce your described issue with a new starter and comparing the compiled bundle output between v8.0.0 and v8.0.1.
Can you please review your reproduction steps and provide a reproduction that can reproduce the issue? Thanks! |
@sean-perkins Thanks for the response. You are right, there seems to be one key thing that I didn't (know is important to) mention - the project uses IonicModule instead of standalone Ionic components. I updated the description and steps to reproduce by addressing this detail. BTW here's how it is on a clean Ionic Side Menu project with IoncModule |
Thanks @StefanNedelchev I am able to reproduce with the lazy loaded web components ( I'm working with the Stencil team to root cause the changes causing this and work towards a fix. |
@sean-perkins thanks for the quick reaction and thanks for still supporting IonicModule because unfortunately some users like me will keep using it until #28574 gets resolved. |
This patch release of Stencil addresses a bundle size increase due to Stencil bundling MockDoc in consumer apps in Angular. Reference issue: #29393
Issue number: resolves #29393 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> With Stencil v4.17.1, in Angular apps Stencil's `MockDoc` will be bundled with the consumer's code resulting in a significant increase to the main chunk. |v8.0.0| |---| |![CleanShot 2024-04-29 at 11 14 36@2x](https://github.com/ionic-team/ionic-framework/assets/13732623/78d6dd63-3816-4da5-8ada-2bfa823a6800)| |v8.0.1| |---| |![CleanShot 2024-04-29 at 11 15 38@2x](https://github.com/ionic-team/ionic-framework/assets/13732623/d21315a8-049f-4874-8a87-996feeb5bd12)| ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updates to v4.17.2 of Stencil, which resolves this regression 🎉 |Dev-build| |---| |![CleanShot 2024-04-29 at 11 17 50@2x](https://github.com/ionic-team/ionic-framework/assets/13732623/a54d1e4c-f9a7-4df9-9064-4b3ae875df11)| ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev-build: `8.0.2-dev.11714402065.169342dc`
Prerequisites
Ionic Framework Version
v8.0.1
Current Behavior
Some extra modules seem to have been included in man JS chunk which results in drastically higher bundle size. This happened just by updating Ionic from 8.0.0 to 8.0.1 without any code changes. My project is not converted to Ionic Standalone components yet.
initial chunk files after a prod build (8.0.1):
webpack bundle analysis (the outlined module with red is the extra stuff that we never had before)
Expected Behavior
Main JS chunk size to remain the same or at least with a minimal impact
initial chunk files after a prod build (8.0.0):
webpack bundle analysis
Steps to Reproduce
ionic build --prod
and check out the size of the output main.js fileCode Reproduction URL
https://angular-ctnsgh-ifi6by.stackblitz.io
Ionic Info
Ionic:
Ionic CLI : 7.2.0 (/usr/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.0.1
@angular-devkit/build-angular : 17.3.5
@angular-devkit/schematics : 17.3.5
@angular/cli : 17.3.5
@ionic/angular-toolkit : 11.0.1
Capacitor:
Capacitor CLI : 6.0.0
@capacitor/android : not installed
@capacitor/core : 6.0.0
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 2.0.1
System:
NodeJS : v20.12.2 (/usr/bin/node)
npm : 10.5.2
OS : Linux 6.5
Additional Information
No response
The text was updated successfully, but these errors were encountered: