I'm trying to use code splitting in my react app and overall it works great, but I noticed something strange in bundle analyzer. My components folder is loaded in the first chunk with all its components (even the ones that are only used in lazy loaded components).
I think the problem is that I follow the structure of using index.ts files to export my components: /components:
The index.ts files just export the needed components like so
export * from './Component';
this is the same as
import { Component } from './Component';
export { Component };
in javascript.
By doing it that way I get very nice looking imports:
import { Component } from 'components';
without the deep paths and all that stuff.
But i think because of that webpack can not recognize how to split it and just bundles it all.
Are there any solutions for this? Maybe I'm doing something wrong?
I use the default create react app config right now.
export * from './Component';
This is causing webpack to bundle all the components which are there in './Component' and whatever it importing and so on.
You should export components individually without using *
Like export { Component1, Component2 } from './Component'
Also if you are using Webpack 5, it creates a mapping of which component import is used and discard unused components. This is not available in Webpack 4.