Closed
Description
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
I have recently tested the new Ionic standalone components and found out that not only the production bundle increased but the DX became worse as well.
Build Stats
Webpack builds with IonicModule
(vanilla experience):
Bundle size:
Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
main.226927d94d05f13e.js | main | 1.11 MB | 293.85 kB
styles.65dcb624a7f5532c.css | styles | 38.14 kB | 7.43 kB
polyfills.5881976821f2e6c5.js | polyfills | 33.10 kB | 10.69 kB
runtime.5a40e30ca595c559.js | runtime | 4.71 kB | 2.26 kB
| Initial Total | 1.19 MB | 314.22 kB
Build time without cache: 64.56s
Build time with cache: 21.75s
Webpack builds with Ionic standalone components (all imports from @ionic/angular/standalone
)
Bundle size:
Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
main.06cb55aa5358d0f2.js | main | 1.41 MB | 327.58 kB
styles.65dcb624a7f5532c.css | styles | 38.14 kB | 7.43 kB
polyfills.5881976821f2e6c5.js | polyfills | 33.10 kB | 10.69 kB
runtime.c69058a04b0bc7f8.js | runtime | 4.33 kB | 2.09 kB
| Initial Total | 1.48 MB | 347.79 kB
Build time without cache: 65.59s
Build time with cache: 24.45s
Esbuild build with Ionic standalone components
Bundle size:
Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
chunk-VCZIZF5F.js | - | 1.54 MB | 317.82 kB
styles.MTDGK4LK.css | styles | 38.72 kB | 7.45 kB
polyfills.YOD2V263.js | polyfills | 32.89 kB | 10.72 kB
chunk-HKJCHXVW.js | - | 32.64 kB | 10.87 kB
chunk-VFY3GGQ6.js | - | 30.68 kB | 9.96 kB
chunk-F2DNOSG5.js | - | 17.69 kB | 3.48 kB
chunk-ZVEDURUM.js | - | 11.01 kB | 3.95 kB
chunk-7EFNZMO4.js | - | 9.88 kB | 2.56 kB
chunk-IAWNAUG6.js | - | 9.88 kB | 2.56 kB
chunk-TDR7JFZA.js | - | 8.61 kB | 3.15 kB
main.WFGZLYL2.js | main | 7.80 kB | 2.40 kB
chunk-QSJGIY2Z.js | - | 7.79 kB | 2.37 kB
chunk-MDMZPGPE.js | - | 5.68 kB | 2.10 kB
chunk-UDVSIRTF.js | - | 3.78 kB | 1.42 kB
chunk-GJ7P76DY.js | - | 1.50 kB | 662 bytes
chunk-SS7U44WW.js | - | 1.05 kB | 531 bytes
chunk-B43CU5JX.js | - | 1022 bytes | 1022 bytes
chunk-SVE7U3VL.js | - | 946 bytes | 946 bytes
chunk-WLLYNIW2.js | - | 941 bytes | 941 bytes
chunk-IUKXAO2M.js | - | 678 bytes | 678 bytes
chunk-TQEIIVVC.js | - | 541 bytes | 541 bytes
chunk-SQ4HSFGE.js | - | 469 bytes | 469 bytes
chunk-4WFVMWDK.js | - | 103 bytes | 103 bytes
chunk-LF5XB4YN.js | - | 99 bytes | 99 bytes
chunk-4SXIAE7V.js | - | 0 bytes | 0 bytes
| Initial Total | 1.76 MB | 386.65 kB
Build time without cache: 24.44s
Conclusion
Bundle size ballooned from 1.19 MB
to 1.76 MB
(almost 50% increase), cold production build time decreased from 64.56s
to 24.44s
(~2.6x decrease).
General experience with Ionic standalone components
Cons
- Ionic team does not provide automatic migration schematics, so it's extremely time consuming to manually migrate everything.
- Ionic does not export standalone component groups, so you have to import all the components one-by-one, which causes a huge increase of Ionic component count in the standalone component
imports
list. My suggestion would be to export component groups like the following:
export const ION_ACCORDION_COMPONENTS = [IonAccordionGroup, IonAccordion, IonItem, IonLabel];
export const ION_CARD_COMPONENTS = [IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent, IonCard];
export const ION_LIST_COMPONENTS = [IonList, IonItem, IonListHeader, IonLabel];
export const ION_TOOLBAR_COMPONENTS = [IonToolbar, IonButtons, IonButton, IonTitle];
- The new
addIcons()
DX is just plain terrible. Not only you have to remember to manually import all the icons, but, when you forget to import some, you get a non-descript error message like the following:
My suggestion would be to get rid ofaddIcons()
and instead add a config toionic.config.json
calledicons
, where you can list all the icons you want to use. If the user does not provide this config, default to importing all icons like before. - Significant increase in production bundle size.
Pros
- Faster
dev server
rebuilds when usingesbuild
builder. It's a bit faster compared to webpack builds without HMR (ng serve --hmr
), but still slower compared to webpack HMR builds. - Considerably faster cold production builds when using the new
esbuild
builder.
Describe the Use Case
Better DX.
Describe Preferred Solution
No response
Describe Alternatives
No response
Related Code
No response
Additional Information
Small tip for people who want to try the new esbuild
builder. If you get errors like the following after switching to esbuild
:
X [ERROR] Can't find stylesheet to import.
╷
1 │ @import '/src/theme/sass-variables';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
You have to update your stylePreprocessorOptions
in the builder options
: