bug: bundle size larger than expected with ionic 6 + webpack

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

This is a follow-up to #24280, which was closed as fixed. Unfortunately, I am still having the same issue-- in Ionic 5, with a React app, the first big chunk of my app was about 500 Kb, but with Ionic 6, it's 1.4 MB.

I also tried using the tool's "show bundle content (inaccurate) option:

What surprised me about the above result is that it shows that ion-slides, ion-accordion-group, ion-breadcrumb, and other components that I do not use in my app are being pulled in, so this is likely the source of the bloat.

Expected Behavior

I expected Ionic 5 and 6 to be roughly the same size.

Steps to Reproduce

Update a moderately sized app from v5 to v6. I am using CRA5 with Webpack 5.

Tested with webpack-bundle-analyzer

react-scripts build --stats; webpack-bundle-analyzer build/bundle-stats.json

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/home/anon/.npm-global/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 6.0.13

Capacitor:

Capacitor CLI : 3.4.3
@capacitor/android : 3.4.3
@capacitor/core : 3.4.3
@capacitor/ios : 3.4.3

Utility:

cordova-res : 0.15.4
native-run : 1.5.0

System:

NodeJS : v16.14.1 (/usr/bin/node)
npm : 8.5.0
OS : Linux 5.10

Additional Information

No response

@ptmkenny

@ptmkenny thanks for reporting this issue.

While the PR for #24280 did partially improve the treeshaking behavior, the root issue was resolved in this recent PR: #24989.

You can validate for yourself with this dev build:

6.0.14-dev.11648082573.18baa25a

Here is an example comparison with the blank Ionic react starter:

v6.0.13 stats:

All (1.82 MB)
static/js/main.0c17bc8e.js (525.47 KB)
static/js/6851.7ae66e16.chunk.js (103.3 KB)
static/js/2782.fea28aed.chunk.js (101.47 KB)
static/js/6893.be2a7b22.chunk.js (87.09 KB)
static/js/9850.a2a9cecc.chunk.js (81.09 KB)
static/js/2992.4c827afe.chunk.js (51.03 KB)
service-worker.js (50.07 KB)
...

dev build stats:

All (621.99 KB)
static/js/main.52d52a81.js (437.56 KB)
static/js/851.7da1c8de.chunk.js (103.3 KB)
service-worker.js (46.2 KB)
static/js/372.419778ed.chunk.js (10.14 KB)
static/js/186.420eab5a.chunk.js (5.54 KB)
static/js/630.2e61bf51.chunk.js (5.42 KB)
static/js/738.17b07b18.chunk.js (5.41 KB)
static/js/377.dbc2ef09.chunk.js (3.44 KB)
static/js/215.b57031fa.chunk.js (2.24 KB)
static/js/856.282319a5.chunk.js (1.09 KB)
static/js/22.4a31d7e9.chunk.js (854 B)
static/js/841.db908d30.chunk.js (827 B)

Can you validate on your end and let me know if the build is still bloated?

@sean-perkins

@sean-perkins Thank you for the response.

I set "@ionic/core": "6.0.14-dev.11648082573.18baa25a", in package.json, ran npm up, and rebuilt my app; unfortunately, I still see basically the same size (1.37 MB).

I deleted the build directory to ensure I wasn't getting something cached, and I also double-checked package-lock.json to ensure @ionic/core got updated. Did I mess a step somewhere?

@ptmkenny

@ptmkenny you will need to update the @ionic/react package version and remove any specific @ionic/core version, as it will pull in the correct version for the dev build:

"@ionic/react": "6.0.14-dev.11648082573.18baa25a"

The offending code for the treeshaking issue was an import to the hydrated bundle in @ionic/react.

@sean-perkins

@sean-perkins Thanks for the guidance. Unfortunately, I'm still getting almost the same size (1.25 MB).

It seems that all Ionic components are getting included for some reason. To demonstrate this, I created a new repo with my package.json and only index.tsx and App.tsx; when I run react-scripts build --stats; webpack-bundle-analyzer build/bundle-stats.json, I get a bloated build.

The repo to demonstrate this is available here: https://github.com/ptmkenny/ionic-react-bloat

Actually, digging into this further, perhaps including things like accordion in core/components is the expected behavior?

I did some more testing with my actual app (not the repro repo) and found the following:

Upgrading from Ionic 5 to 6, the size of the largest bundle increases significantly (more than doubles).
Updating from Ionic 6 current release to the bugfix release, the largest bundle size stays the same, but the overall size of the app goes down significantly.

Largest individual bundle size vs. total app size

Ionic 5: 677 kB / 2.79 MB
Ionic 6 current: 1.37 MB / 3.89 MB
Ionic 6 bugfix: 1.28 MB / 2.68 MB

Could you please confirm this is the expected behavior? The overall bundle in 6 being smaller than 5 is great, but I'm a little worried that the much bigger initial bundle will slow down app load times.

Screenshots below.

Ionic 5 (CKEditor hidden):

Ionic 6 current release (CKEditor hidden):

Ionic 6 bugfix release (CKEditor hidden):

@ptmkenny

Hey @ptmkenny,

There was indeed a treeshaking issue that @sean-perkins did a great job fixing. This fix is available now in Ionic 6.0.14. I observed a bundle size reduction in https://github.com/ptmkenny/ionic-react-bloat after building with v6.0.14.

I took a look at your reproduction, and I think webpack-bundle-analzyer may be misrepresenting the results.

When looking at webpack-bundle-analyzer it reports that ion-picker.js was processed. However, the source code for ion-picker.js was not actually found in the build directory for your app. I noticed in the screenshots that you have "Show contents of concatenated modules" enabled. This feature can yield inaccurate results, and I do not recommend using it as the basis for treeshaking analysis.

To test the true treeshaken bundle size, I looked at the total file size of all the non-source map JS files in build/static:

	v6.0.13	v6.0.14
total JS size	1.8mb	507kb
largest chunk	457kb	367kb

Can you try your build again and see if you can find any un-used Ionic modules imported in the build directory? I typically look in the main.*.js file. There will be a few Ionic utilities that are included in your bundle that you did not explicitly import. Those are dependencies of IonApp.

@liamdebeasi

@liamdebeasi Ok thanks. I had some more time to look at this and I see that the actual bundles are correct, and the webpack-bundle-analyzer output is inaccurate.

I'll close this now as the issue is completely solved in the latest release. Many thanks for such a thorough solution!

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: bundle size larger than expected with ionic 6 + webpack #25005

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: bundle size larger than expected with ionic 6 + webpack #25005

Description

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

Activity

sean-perkins commented on Mar 28, 2022

ptmkenny commented on Mar 29, 2022

sean-perkins commented on Mar 29, 2022

ptmkenny commented on Mar 30, 2022

ptmkenny commented on Mar 30, 2022

liamdebeasi commented on Mar 30, 2022

ptmkenny commented on Apr 4, 2022

ionitron-bot commented on May 4, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions