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:
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.
