bug: All ionic components are bundled, even unused components

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
Nightly

Current Behavior

Hello,
I'm currently using Vite with ionic react, and when building the app a large chunk file with some small ones, will be created.
when I used rollup-plugin-visualizer I realized that all ionic components are bundled.

Expected Behavior

should be tree-shakable

Steps to Reproduce

just build with Vite.
I also tried with default webpack version and result is same.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.16.2
Ionic Framework : @ionic/react 6.1.3

Capacitor:

Capacitor CLI : 3.4.3
@capacitor/android : 3.5.0
@capacitor/core : 3.5.0
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run : 1.5.0

System:

NodeJS : v16.13.0 (C:\Program Files\nodejs\node.exe)
npm : 8.1.0
OS : Windows 10

Additional Information

No response

Thanks for the issue. Can you please provide a GitHub repo I can use to verify this behavior?

sure:
https://github.com/arasrezaei/mocholmag

Are you able to provide a minimal reproduction of the issue? It's hard to verify if this is an Ionic bug when I have to go through a lot of your app's business logic. For example, the Telegram.tsx file is quite large. If that is not needed to reproduce the issue, I recommend removing it from the sample app.

I can confirm that even by importing only IonApp component all components are bundled:

When I run a production build using just that code I get the following:

vite v2.9.6 building for production...
✓ 177 modules transformed.
dist/index.html                          3.15 KiB
dist/assets/swipe-back.8d7cf56d.js       0.65 KiB / gzip: 0.45 KiB
dist/assets/tap-click.07e7d47b.js        1.94 KiB / gzip: 0.94 KiB
dist/assets/status-tap.60e575cc.js       0.47 KiB / gzip: 0.33 KiB
dist/assets/input-shims.5f8ad0e3.js      4.40 KiB / gzip: 1.91 KiB
dist/assets/md.transition.b6530c86.js    0.92 KiB / gzip: 0.50 KiB
dist/assets/ios.transition.68b0c25a.js   9.19 KiB / gzip: 2.60 KiB
dist/assets/swiper.bundle.a76d5250.js    93.85 KiB / gzip: 25.25 KiB
dist/assets/index.67d07ad1.js            265.09 KiB / gzip: 81.00 KiB

I do not recommend using bundle analyzer tools as the basis for analyzing treeshaking. They typically show what the bundler has processed, not necessarily what the final build result is after treeshaking. For example, we had a similar issue in #25005 but the issue ended up being that the bundle analyzer was not showing the treeshaking results.

What results do you get when you run npm run build using only the code provided in #25212 (comment)?

I've got same results with 265kb index bundle.
I also removed IonApp and result was about 140kb index file...
Sems like IonApp component itself, is 120kb bundled.
If this size is normal for this component, then every thing is OK.

IonApp has a few dependencies needed to bootstrap Ionic, so IonApp itself likely is not 120KB.

For example, the JS files you see that are in the single digit KBs are utilities that all Ionic apps need.

The swiper.bundle.js file really should not be there, but this is unavoidable due to how we bundle the compiled Swiper library. The good news is ion-slides, the component that uses swiper.bundle.js, is deprecated and scheduled for removal in Ionic 7. Once that release ships, this issue should be resolved automatically.

The remaining file size is primarily comprised of a few things:

The IonApp component itself.
Several global stylesheets that get loaded.
The Stencil runtime.

I do see several components getting bundled that are not being used in your app. However, most of these are components that almost all apps are going to use. For example, code for ion-ripple-effect is in the bundle. This is used in several components including IonTabButton, IonButton, and IonItem.

While there are likely some improvements we can make to how "treeshakable" Ionic is, I am not seeing every Ionic component getting bundled. We are tracking some treeshaking improvements internally and are looking to roll those improvements out in upcoming releases of Ionic.

I am going to close this issue for now. Thanks!

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.

Navigation Menu

Repository navigation

bug: All ionic components are bundled, even unused components #25212

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

bug: All ionic components are bundled, even unused components #25212

Description

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

Activity

liamdebeasi commented on Apr 28, 2022

arasrezaei commented on Apr 30, 2022

liamdebeasi commented on May 2, 2022

arasrezaei commented on May 2, 2022

liamdebeasi commented on May 2, 2022

arasrezaei commented on May 2, 2022

liamdebeasi commented on May 2, 2022

ionitron-bot commented on Jun 1, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions