Skip to content

feat: Support code splitting for Ionic Standalone components #30114

Closed
Closed
feat: Support code splitting for Ionic Standalone components#30114
Labels
needs: investigationThis issue is waiting on more investigation from the engineering team.package: angular@ionic/angular package

Description

@JonathanIlk
JonathanIlk
opened on Jan 7, 2025

Prerequisites

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

Activity

  1. ionitron-bot
    added
    triage
    on Jan 7, 2025

  2. godenji commented on Jan 23, 2025

    @godenji
    godenji
    on Jan 23, 2025

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

  3. asif986 commented on Sep 18, 2025

    @asif986
    asif986
    on Sep 18, 2025

    Hi @godenji ,
    So you mean when I add one Ion-Header standalone component in page. At the time of production build all the ionic components added in www folder.

  4. godenji commented on Sep 18, 2025

    @godenji
    godenji
    on Sep 18, 2025

    Hi @godenji , So you mean when I add one Ion-Header standalone component in page. At the time of production build all the ionic components added in www folder.

    Not sure, haven't looked in awhile, perhaps things have changed.

    Try it yourself, do a prod build (ionic build --prod) with sourcemaps enabled and take a look at the output (I use source-map-explorer www/browser/main...js).

    I assume that the status quo remains if the issues is still open, would be pleasantly surprised if that weren't the case...

  5. asif986 commented on Sep 22, 2025

    @asif986
    asif986
    on Sep 22, 2025

    Hi @godenji , Thank you for the response. I have gone through the source-map-explorer but facing some issues.
    So I did following thing,

    I created one standalone component in Ionic Application and Loaded all the Ionic standalone components.

    import {
  IonModal,
  IonFabButton,
  IonFab,
  IonSpinner,
  IonRow,
  IonIcon,
  IonHeader,
  IonCol,
  IonContent,
  IonList,
  IonItem,
  IonLabel,
  IonRadio,
  IonRadioGroup,
  IonButton,
  IonButtons,
  IonTitle,
  IonToolbar,
  IonSkeletonText,
  IonText,
  IonTextarea,
  IonGrid,
  IonProgressBar
} from '@ionic/angular/standalone';

export const IONIC_IMPORTS = [
    IonProgressBar,
    IonGrid,
    IonTextarea,
    IonText,
    IonSkeletonText,
  IonModal,
  IonFabButton,
  IonFab,
  IonSpinner,
  IonRow,
  IonIcon,
  IonHeader,
  IonCol,
  IonContent,
  IonList,
  IonItem,
  IonLabel,
  IonRadio,
  IonRadioGroup,
  IonButton,
  IonButtons,
  IonTitle,
  IonToolbar
];

    import { IONIC_IMPORTS } from 'src/app/shared/ioni-imports';

@Component({
  selector: 'app-model-mangement',
  templateUrl: './model-mangement.page.html',
  styleUrls: ['./model-mangement.page.scss'],
  standalone: true,
  imports: [ IONIC_IMPORTS, CommonModule, FormsModule]
})


    <ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>model-mangement</ion-title>
  </ion-toolbar>
</ion-header>

    After running following command ionic build --production --source-map it will generate the www/ and source map files (.map). now I am using http-server to ran the www folder locally and checking that component code. then tree-shanking acutal happen at build time only so unused component was removed from the final bundle.

    component bundle code

    template: function(o, y) {
  o & 1 && (
    a(0, "ion-header", 0)(
    1, "ion-toolbar")(
    2, "ion-title"),
    f(3, "model-mangement"),
    p()()()
  ),
  o & 2 && s("translucent", !0)
},
dependencies: [u, v, I, l, d]

  6. hakimio commented on Sep 22, 2025

    @hakimio
    hakimio
    on Sep 22, 2025

    Tree shaking works fine. This bug report is about code splitting.
    Please read the linked comment to understand the difference.

  7. gnbm
    added
    package: angular@ionic/angular package
    needs: investigationThis issue is waiting on more investigation from the engineering team.
    and removed
    triage
    on Jun 17, 2026

  8. j-oppenhuis commented on Jul 2, 2026

    @j-oppenhuis
    j-oppenhuis
    on Jul 2, 2026
    Contributor

    We're hitting this as well, and it's become a significant issue for us since our app is served as a web-app.

    Our setup follows all the current best practices:

    • @ionic/angular/standalone imports only (no IonicModule, no shared Ionic import arrays)
    • Per-component addIcons() registration
    • Lazy-loaded routes via loadComponent/loadChildren throughout
    • Angular application builder (esbuild)

    Despite this, our initial bundle is also around 2 MB, and source-map analysis shows it's dominated by Ionic components that are mostly used in lazy-loaded feature routes — they get hoisted into the initial chunks because the standalone components can't be code-split.

    As the OP notes, tree shaking works, but without code splitting every Ionic component used anywhere in the app is downloaded by every user on first load. For web-delivered apps this effectively penalizes adopting the standalone architecture.

    A possibly non-breaking way to implement this: could the existing @ionic/angular/standalone barrel be rebuilt as thin re-exports over per-component secondary entry points (e.g. @ionic/angular/standalone/button)? Existing import { IonButton } from '@ionic/angular/standalone' statements would keep working unchanged so no import migration or breaking change would be needed. The deep import paths could then be an optional style rather than a required migration, avoiding the DX concerns raised in #28574 (comment).

    If there's anything we can do to help move this forward — testing a prerelease or contributing in another way — we'd be glad to. Just let us know.

  9. OS-jacobbell
    added a commit that references this issue on Aug 14, 2026

    feat(angular): allow per-component standalone import paths for better…

    c7a9336

  10. OS-jacobbell commented on Aug 17, 2026

    @OS-jacobbell
    OS-jacobbell
    on Aug 17, 2026
    Contributor

    Per-component secondary entry points will be available in Ionic Framework v9. Thank you for raising the issue!

  11. OS-jacobbell
    closed this as completedon Aug 17, 2026

  12. ionitron-bot commented on Sep 16, 2026

    @ionitron-bot
    ionitron-botBot
    on Sep 16, 2026 – with 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.

  13. ionitron-bot
    locked and limited conversation to collaborators on Sep 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs: investigationThis issue is waiting on more investigation from the engineering team.package: angular@ionic/angular package

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions