How to split Ionic React app components to reduce chunk size?

113 Views Asked by At

I have an Ionic React app that has a big chunk (786 kB).

When I inspect the chunk, I see that it consists almost entirely of Ionic React framework components:

ionic react chunk inspection

How can I split this big chunk up into smaller chunks?

In vite.config.ts, I tried:

output: {
  experimentalMinChunkSize: 10000,
  manualChunks: {
    // CKEditor5 by itself is over 500 Kb, so split out the engine.
    editorEngine: ['@ckeditor/ckeditor5-engine'],
    ionicCore: ['@ionic/core/components'],
    // Bundling @ionic/react separately creates a 900 KB monster.
    // ionicReact: ['@ionic/react'],
    pluginPurchase: ['cordova-plugin-purchase'],
    stencil: ['@stencil/core/internal'],
  },

As noted in the comment, when I try to break out @ionic/react, I get an even bigger chunk.

I use code splitting within my app, but it seems that all the framework components get bundled together regardless of the code split.

Vite 4.4.9, ionic react 7.4.1.

0

There are 0 best solutions below