bug: [7.5] standalone build size is bigger than standard version

[hatsantos]

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

v7.x

Current Behavior

When converted to a standalone components app, using Ionic standalone components, the app build size is not smaller as announced in the blog post.

Using a sample Ionic app from the CLI, such as "sidemenu," after converting it to standalone components (following the guide: https://ionicframework.com/docs/angular/build-options#migrating-from-modules-to-standalone), the initial app size is larger than the module version.

Ionic "sidemenu" sample app and updated to Ionic 7.5 and Ionicons 7.2.1

ionic build --prod

Ionic "sidemenu" sample app updated to Ionic 7.5 and Ionicons 7.2.1 and migrated to standalone components

ionic build --prod

Am i doing something wrong?

The migration effort is still high, and in doing so, I would like to ensure that it's worth it and that I'm doing it the right way.

Expected Behavior

Initial bundle size to be smaller.

Steps to Reproduce

1. ionic start > angular > standalone > sidemenu
2. build a prod app
3. update to standalone version of ionic components
4. build a prod app

Code Reproduction URL

https://hatsbytes@bitbucket.org/hatslab/ionstandalone.git

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (C:\Users\username\AppData\Local\pnpm\global\5.pnpm@ionic+cli@7.1.1\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 7.5.0
@angular-devkit/build-angular : 16.2.6
@angular-devkit/schematics : 16.2.6
@angular/cli : 16.2.6
@ionic/angular-toolkit : 9.0.0

Capacitor:

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

Utility:

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

System:

NodeJS : v20.8.1 (C:\Program Files\nodejs\node.exe)
npm : 10.1.0
OS : Windows 10

Additional Information

Code Reproduction URL has a standalone ionic component converted app.

[gant02]

I have the exact same behavior with my app following the migration guide. All standalone components are imported in the main.js bundle. With the tab starter, everything is imported in a dedicated chunk but all at once.

[liamdebeasi]

Thanks for the report. I can reproduce a larger than expected bundle size. It looks like certain generated component wrappers have side effects which are causing them to be pulled into the build. In particular, we manually generate a handful of components to apply extra customizations. These manually generated wrappers reassigned, creating the side effect.

You'll notice that some auto generated components are in there too. For example, IonItem (auto generated) is being pulled in because it is used inside of IonDatetime (manually generated).

I'm still digging into this, so there may be other issues too but this is what I know so far.

[liamdebeasi]

It looks like this was introduced in 28f2ec9. Ionic wasn't creating side effects, but the way ng-packagr generated the components caused a side effect. I was able to avoid the ng-packagr issue.

Here's a dev build with a proposed fix if you are interested in testing: 7.5.1-dev.11697480817.10fa2601

[hatsantos]

@liamdebeasi Thank you, I'll test it and provide feedback as soon as possible.