bug: the minified main chunk in Angular increased with 130 KB after upgrading to v6

[StefanNedelchev]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

After doing a production build, the main chunk is about 130 KB larger than it used to be.

Before:

Initial Chunk Files                        | Names              |      Size
main.846d9ce5796d1dd1c04a.js               | main               | 346.31 kB

After upgrading to v6 following the official guide.

Initial Chunk Files                        | Names             |      Size
main.ec6b181d25127e7a.js                   | main              | 476.77 kB

Expected Behavior

I would expect the main chink to remain more or less the same in size, not to jump so drastically without introducing any changes to my existing code.

Steps to Reproduce

1. Create a fresh Ionic project with the latest CLI by selecting Angular as a framework and some of the starter templates (in my case I selected side menu).
2. After the repo is initialized, run ionic build --prod to create a production build and record the size of the main JS chunk
3. Upgrade to Ionic v6 following the official guide
4. Run ionic build --prod to create a production build and record the size of the main JS chunk
5. Compare both sizes. You should notice a great increase after the upgrade.

Code Reproduction URL

sdfsdf

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (C:\Users\Stefan\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.0.0
@angular-devkit/build-angular : 13.0.4
@angular-devkit/schematics : 12.1.4
@angular/cli : 13.0.4
@ionic/angular-toolkit : 4.0.0

Capacitor:

Capacitor CLI : 3.3.3
@capacitor/android : not installed
@capacitor/core : 3.3.3
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 1.5.0

System:

NodeJS : v14.18.1 (C:\Program Files\nodejs\node.exe)
npm : 6.14.15
OS : Windows 10

Additional Information

Notice how the @angular-devkit/schematics`` package logged by ionic info has a version 12.1.4. Later I manually installed dev dependency `@angular-devkit/schematics` with version 13 .0.4 and also updated @ionic/angular-toolkit to v5.0.3 but the bundle size didn't seem to change.

No response

[liamdebeasi]

Thanks for the issue. In Ionic 6 we introduced 2 new components, 4 overhauled components, and about a dozen new features to the API. The size of the framework has certainly increased because of all the new features.

At the moment, Ionic Angular does not fully treeshake because of how all components are registered up front. As a result, this can cause the bundle size to be larger than it really needs to be. This is a legacy behavior from the early days of Ionic that we are looking to improve.

That being said, this additional code is not going to be loaded up front when users open your app thanks to lazy loading of assets. So for example, even if your bundle includes code for ion-accordion, the code for this component is not going to be loaded until you navigate to a page that uses ion-accordion. Additionally, if your app does not use ion-accordion, this code will never be loaded.

We are tracking some improvements to this process internally. I am going to close this since there is nothing actionable by the Ionic team at the moment. I understand this may be disappointing, but we are absolutely committed to improving this experience, and we will communicate with the Ionic community when have more information to share. Thank you!

[StefanNedelchev]

@liamdebeasi thanks for the explanation, I'm happy to know that you are aware of this and working on improving it 👍

[maxcodefaster]

The increase happend when updating from "6.0.0-rc.2" to "6.0.0-rc.3".

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.