Skip to content

feat: Ionic Angular standalone component feedback #28445

Closed
@hakimio

Description

@hakimio

Prerequisites

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:
    image
    My suggestion would be to get rid of addIcons() and instead add a config to ionic.config.json called icons, 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 using esbuild 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:

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions