I am building an application using ReactJS and ViteJS, and i am trying to do code-splitting to reduce the after build chunk sizes and request them only when needed.
I have tried to use lazy loading from react framework, but it still result in a very small chunk sizes for pages (around 1 to 2 KB each) and a huge index.js file (can exceed 3.3 MB alone).
I have also tried using manualChunks in the rollupOptions in the vite.config.js file, but as expected all the chunks get loaded at the same time once the app started, so it is not effective at all.
A note to know about my code filing and indexing, I usually create an index file for each directory in my app e.g. components, redux, modules, ...etc. directories each has its own index file which exports all the functions, classes, types, interfaces that i am using anywhere else in the app. and i always import from the directory index only.
Could this pattern be related to the code-splitting problem ?
And if so, Is there is anything could be done to fix that during building without changing my indexing pattern ?
And if not, What else i can do to improve the code-splitting and chunk sizes ?