CRA: Extract particularly big modules into separate chunks?

Question

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?

Answer 1

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.

Answer 2

Like Dennis mentioned, React.lazy is one good way. But if you want to fully control the modules that comes from node_modules or actually from anywhere in your project - please have a look at webpack splitchunks

This will give you the ability decide which module goes to which chunk. A quick example:

optimization: {
        splitChunks: {
            cacheGroups: {
                monaco_editor: {
                    test: /monceo-editor[\\/]/,
                    name: 'monaco_editor',
                    maxSize: MaxChunkSize,
                    minSize: MinChunkSize
                },
            }
        }
    }

For example here I'm saying take all the modules(files) under monaco-editor directory and put them in one bucket - this bucket will be later separate to multiple chunks each with min size of MinChunkSize and max size of MaxChunkSize.

The vendor chunk is the automatic cache group that is added by webpack. - It pulls all modules from node_modules that are not loaded dynamically and put them in one chunk.

You can disable this behavior by setting:

cacheGroups: {
    defaultVendors: null
}

You can define your own simple/complex node_modules distribution. You can define certain packages to always go to certain chunks. This way the chunk cache won't change unless you upgrade one of the packages version - this is good practice for performance since this cache will be most likely serve from cache.

Here is a more complex example which is good for performance:

optimization: {
        splitChunks: {
            cacheGroups: {
                myVendor: {
                    test: /node_modules[\\/]/,
                    name(module) {
                        const matched = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/);
                        const packageName = matched && matched.length > 2 ? matched[1] : undefined;

                        return packageName;
                    },
                    maxSize: MaxChunkSize,
                    minSize: MinChunkSize
                },
            }
        }
    }

In this example, each package will be push to it's own bucket. Now the bucket will merge or split by the min/max size.