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

bug: bundle size increase with IonicModule and lazy loaded web components in v8.0.1 #29393

Closed
3 tasks done
StefanNedelchev opened this issue Apr 24, 2024 · 4 comments · Fixed by #29416
Closed
3 tasks done
Labels
stencil Issues that require changes in Stencil

Comments

@StefanNedelchev
Copy link

StefanNedelchev commented Apr 24, 2024

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):
Screenshot from 2024-04-24 18-49-33

webpack bundle analysis (the outlined module with red is the extra stuff that we never had before)
after

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):
Screenshot from 2024-04-24 18-50-53

webpack bundle analysis
Screenshot 2024-04-24 at 18-56-03 sleda 24 Apr 2024 at 18 55

Steps to Reproduce

  1. Initialize a brand new project with the CLI by selecting Angular and Modules (instead of standalone Ionic components) as a framework and use v8.0.0 (manually pin down the ionic version to 8.0.0 if necessary).
  2. Do a production build with ionic build --prod and check out the size of the output main.js file
  3. Bump the ionic version to 8.0.1 and repeat step 2

Code 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

@ionitron-bot ionitron-bot bot added the triage label Apr 24, 2024
@StefanNedelchev StefanNedelchev changed the title bug: [Angular] main JS chunk size drastically increased after updating from v8.0.0 to v8.0.1 bug: [Angular] main JS chunk size suddenly increased by ~30% after updating from v8.0.0 to v8.0.1 Apr 24, 2024
@sean-perkins
Copy link
Contributor

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.

v8.0.0 v8.0.1
CleanShot 2024-04-24 at 13 14 46 CleanShot 2024-04-24 at 13 14 02

Can you please review your reproduction steps and provide a reproduction that can reproduce the issue?

Thanks!

@sean-perkins sean-perkins added the needs: reply the issue needs a response from the user label Apr 24, 2024
@ionitron-bot ionitron-bot bot removed the triage label Apr 24, 2024
@StefanNedelchev StefanNedelchev changed the title bug: [Angular] main JS chunk size suddenly increased by ~30% after updating from v8.0.0 to v8.0.1 bug: [Angular][IonicModule] main JS chunk size suddenly increased by ~30% after updating from v8.0.0 to v8.0.1 Apr 24, 2024
@StefanNedelchev
Copy link
Author

StefanNedelchev commented Apr 24, 2024

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.
v8.0.0 v8.0.1
CleanShot 2024-04-24 at 13 14 46 CleanShot 2024-04-24 at 13 14 02

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

8.0.0
Screenshot from 2024-04-24 21-11-18

8.0.1
Screenshot from 2024-04-24 21-13-12

@ionitron-bot ionitron-bot bot added triage and removed needs: reply the issue needs a response from the user labels Apr 24, 2024
@StefanNedelchev StefanNedelchev changed the title bug: [Angular][IonicModule] main JS chunk size suddenly increased by ~30% after updating from v8.0.0 to v8.0.1 bug: [Angular][IonicModule] main JS chunk size drastically increased after updating from v8.0.0 to v8.0.1 Apr 24, 2024
@sean-perkins
Copy link
Contributor

Thanks @StefanNedelchev I am able to reproduce with the lazy loaded web components (IonicModule). I've narrowed this to a recent dependency bump to v4.17.0 of Stencil.

I'm working with the Stencil team to root cause the changes causing this and work towards a fix.

@sean-perkins sean-perkins changed the title bug: [Angular][IonicModule] main JS chunk size drastically increased after updating from v8.0.0 to v8.0.1 bug: bundle size increase with IonicModule and lazy loaded web components in v8.0.1 Apr 24, 2024
@StefanNedelchev
Copy link
Author

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

@sean-perkins sean-perkins added stencil Issues that require changes in Stencil and removed triage labels Apr 24, 2024
sean-perkins added a commit that referenced this issue Apr 29, 2024
This patch release of Stencil addresses a bundle size increase due to Stencil bundling MockDoc in consumer apps in Angular.

Reference issue: #29393
@sean-perkins sean-perkins removed their assignment Apr 29, 2024
github-merge-queue bot pushed a commit that referenced this issue Apr 29, 2024
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`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
stencil Issues that require changes in Stencil
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants