feat: Support code splitting for Ionic Standalone components

[JonathanIlk]

Prerequisites

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

Describe the Feature Request

Currently switching from IonicModule imports to @ionic/angular/standalone imports increases the initial bundle size of an Ionic app.

The reasons and possible solutions for this are already described here: #28574 (comment)

Short summary of #28574 (comment):

Both Ionic and Angular/Webpack/ESBuild are working as intended here. Tree shaking is working (meaning unused components are being eliminated from the final build), but code splitting is not ideal due to limitations in bundlers such as Webpack and ESBuild.

Ionic can change how components are imported to avoid this limitation, but it comes with breaking changes and a degraded developer experience. While we're open to making this change in the future, we'd like to have a Request For Comments (RFC) period first and investigate mitigation techniques to preserve the developer experience.

Proposed solution

Change imports for standalone components to optimize for code splitting:

- import { IonHeader, IonToolbar, IonTitle, IonButtons, IonBackButton, IonContent } from '@ionic/angular/standalone';
+ import { IonHeader } from '@ionic/angular/standalone/header';
+ import { IonToolbar } from '@ionic/angular/standalone/toolbar';
+ import { IonTitle } from '@ionic/angular/standalone/title';
+ import { IonButtons } from '@ionic/angular/standalone/buttons';
+ import { IonButton } from '@ionic/angular/standalone/button';
+ import { IonContent } from '@ionic/angular/standalone/content';

Example

We migrated our app over to Ionic Standalone components and saw the following initial bundle size:

Baseline: Angular 18, Webpack, Ionic Modules, App Modules -> 1.08mb
Upgrade 1: Angular 19, ESBuild, Ionic Modules, App Modules -> 1.25mb
Upgrade 2: Angular 19, ESBuild, Ionic Modules, App Standalone -> 1.10mb
Upgrade 3: Angular 19, ESBuild, Ionic Standalone, App Standalone -> 1.8mb

This increase in bundle size blocks us from adopting the new ionic standalone components.
This is especially troublesome as some of the Components are only used on internal pages only used by staff. Still they get downloaded for 99% of users who never require these while using the website.

Describe the Use Case

When building Ionic as a website, the bundle size should be as small as possible to improve load times for users.

Describe Preferred Solution

Export Ionic Standalone components in a way that supports code splitting.

Describe Alternatives

Add a warning to the documentation page (https://ionicframework.com/docs/angular/build-options#standalone) that warns that code splitting is not supported for the Ionic Standalone components, which may lead to increased initial bundle sizes.

Currently the wording "use Ionic components as standalone components to take advantage of treeshaking" makes it sound like a migration might be able to decrease the initial bundle size.

Related Code

No response

Additional Information

I have opened this Feature request, because I couldn't find an open feature request for this.

Although I did find some related issues:
#28574 -> discusses the need for a RFC period and a need for a feature request
#29467 -> closed because a feature request would be better
#28445 -> discusses a ng-packagr issue that lead to increased bundle sizes.

There are also two discussions on the forums about this topic (one from me):
https://forum.ionicframework.com/t/ionic-standalone-causes-an-increase-in-initial-bundle-size/243870
https://forum.ionicframework.com/t/ionic-standalone-esbuild-increase-in-initial-bundle-size-lazy-loaded-components-included-in-initial-bundle/245661

[godenji]

It is especially surprising that all Ionic components are included in the production bundle, whether you use them or not. At least with the modules based approach you pay for what you use, whereas with Ionic standalone you pay for everything, including what you don't use O_o

I understand developer team time is limited, but there must be a way for Ionic users to go all-in on standalone (as Angular itself has done) without paying the all-the-things tax.

The OP lists separate imports as one means to achieve code splitting amenable source files, which I personally have zero problem with (particularly with vs code, where import lines essentially autocomplete/write themselves), it's just header file setup that is largely ignored (i.e. just scroll to the actual business logic/code and get to work).