ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.47k stars 13.53k forks source link

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

Closed StefanNedelchev closed 2 weeks ago

StefanNedelchev commented 3 weeks ago

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

sean-perkins commented 3 weeks ago

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!

StefanNedelchev commented 3 weeks ago

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

sean-perkins commented 3 weeks ago

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.

StefanNedelchev commented 3 weeks ago

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