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:

• /Component1
  • /Child1
    • Child1.tsx
    • index.ts
  • Component1.tsx
  • index.ts
• /Component2
  • Component2.tsx
  • index.ts
• index.ts

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.