Search code examples
reactjswebpackcreate-react-appcode-splitting

CRA: Extract particularly big modules into separate chunks?

Using latest CRA. All node_modules are bundled into a separate chunk, which is nice. But that chunk is still over several megabytes in size. At the same time I do not see any option to override or customize chunking logic in CRA. Basically I would like to extract particularly big modules from that node_modules chunk and have them loaded as separate chunks entirely. Is it possible without ejecting?

Solution

  • Yes, with React.Lazy it will separate specific components from the main chunk.

    const OtherComponent = React.lazy(() => import('./OtherComponent'));

    See Code-Splitting.

    If you don't want to eject see react-app-rewired or use other services than CRA like Gatsby.