Repository navigation
bug: Ionic standalone components are not treeshakable #28483
Description
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
Ionic standalone components are not treeshakable.
Expected Behavior
Ionic standalone components are treeshakable.
Steps to Reproduce
- Clone ionic-treeshaking-test repo
- Build the project and check the resulting "Initial Total"
- Optionally switch from
esbuildtowebpackbundler and check the build size again - Change git branch to
ionic-moduleand build the project again - Compare build sizes you get in previous steps
Code Reproduction URL
https://github.com/hakimio/ionic-treeshaking-test
Ionic Info
Ionic:
Ionic CLI : 7.1.1
Ionic Framework : @ionic/angular 7.5.3
@angular-devkit/build-angular : 17.0.0-rc.4
@angular-devkit/schematics : 16.2.9
@angular/cli : 17.0.0-rc.4
@ionic/angular-toolkit : 10.0.0
Capacitor:
Capacitor CLI : 5.5.1
@capacitor/android : not installed
@capacitor/core : 5.5.1
@capacitor/ios : not installed
Utility:
cordova-res : 0.15.3
native-run : 1.7.4
System:
NodeJS : v18.17.1
npm : 10.2.3
OS : Windows 10
Build sizes
Webpack + Ionic Module
Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
main.a536c9608db8fe42.js | main | 438.12 kB | 112.26 kB
polyfills.53dd1ba240d556a9.js | polyfills | 33.09 kB | 10.68 kB
styles.12498b9a067190a0.css | styles | 26.31 kB | 4.14 kB
runtime.70fad7281072f3ce.js | runtime | 4.50 kB | 2.17 kB
| Initial Total | 502.02 kB | 129.25 kB
esbuild + Ionic Standalone components
Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
chunk-QON5UNTZ.js | - | 1.24 MB | 185.56 kB
polyfills-FCOTMFN3.js | polyfills | 32.81 kB | 10.63 kB
chunk-HCAOIOEU.js | - | 32.75 kB | 10.89 kB
styles-EBGUPLIJ.css | styles | 26.83 kB | 4.14 kB
main-LNWMOTZP.js | main | 17.68 kB | 5.11 kB
chunk-W37MDJIX.js | - | 11.04 kB | 3.95 kB
chunk-ARD6CFHF.js | - | 9.94 kB | 2.56 kB
chunk-Z4V4M3ZT.js | - | 5.69 kB | 2.09 kB
chunk-ARLVSRXN.js | - | 3.98 kB | 1.48 kB
chunk-WQAL34I6.js | - | 1.67 kB | 661 bytes
chunk-ZDO5NYW7.js | - | 1.05 kB | 530 bytes
chunk-QPVVTFFW.js | - | 1022 bytes | 1022 bytes
chunk-WFGC6I42.js | - | 941 bytes | 941 bytes
chunk-7KGURMOZ.js | - | 908 bytes | 908 bytes
chunk-FQ65QLOX.js | - | 762 bytes | 762 bytes
chunk-A73CKFRS.js | - | 686 bytes | 686 bytes
chunk-J6ICYO4L.js | - | 557 bytes | 557 bytes
chunk-4U6PRYVA.js | - | 126 bytes | 126 bytes
chunk-LF5XB4YN.js | - | 99 bytes | 99 bytes
| Initial Total | 1.39 MB | 232.57 kB
Webpack + Ionic Standalone components
Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
main.fdf3206ac410ddc6.js | main | 743.21 kB | 143.91 kB
polyfills.f8bea4ae787ca74b.js | polyfills | 33.09 kB | 10.67 kB
styles.12498b9a067190a0.css | styles | 26.31 kB | 4.14 kB
runtime.600e94669b643e4d.js | runtime | 2.88 kB | 1.38 kB
| Initial Total | 805.49 kB | 160.10 kB
Activity
liamdebeasi commentedon Nov 7, 2023
Thanks for following up here. I can reproduce the reported behavior with Webpack, but Ionic is working correctly here. I used https://www.npmjs.com/package/source-map-explorer to determine which components are being pulled into your build, and all of the components included are being used in your application. I did not identify any components being pulled into your build that were not being used in your application:
The Webpack + Ionic Module test you conducted is incomplete because it does not account for the lazy chunks that are pulled into the build, only the initial chunks. If you include the lazy chunks you'll see that the IonicModule bundle size is much larger than the Webpack + Standalone bundle size. I used the blank starter app in the example below, but the same concepts apply to your application:
Standalone
Module
In your application, the
main.*.jschunk for standalone is indeed larger than the modulemain.*.jschunk. This is due to a difference in how the components are loaded. With the standalone build, the components you need are directly imported into your application. This approach allows for a smaller bundle size potentially at the expense of a larger initial chunk. With the module build, the components are lazily loaded as needed. This approach allows for a smaller initial chunk at the expense of increasing the entire build size.Ionic does not control how your application is bundled, but I can confirm that the unused Ionic components are being correctly removed from your application build.
I am going to close this, but let me know if you have any questions.
ionitron-bot commentedon Dec 7, 2023
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.