Debugging method for webpack code splitting using React.lazy

Question

I'm using React.lazy to try and split some code out of my main application but it's not working the way I expect and I'm having a hard time figuring out how to debug it .

My code is roughly as follows:

// index.js

import React from 'react';
import { LibraryUtils } from './library/utils';

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

// component.js

import React from 'react';
import LibraryComponent from './library/component';
...

What I want is:

• vendors.chunk.js:react
• main.chunk.js:index.js
• main-1.chunk.js：component.js
• library-0.chunk.js:library/utils
• library-1.chunk.js:library/component
• index.html: main.chunk.js, library-0.chunk.js, vendors.chunk.js
• Asynchronous chunks: main-1.chunk.js, library-1.chunk.js

What I get is:

• vendors.chunk.js:react
• main.chunk.js：index.js component.js
• library.chunk.js:library/utils libraries/components
• index.html: main.chunk.js, library.chunk.js, vendors.chunk.js
• Async blocks: None

As a result, my initial page load requires loading all the JS, resulting in poor performance.

How do I force webpack to split library into multiple chunks so that I can take advantage of async chunks? Better yet, how do I debug a problem like this?

My configuration is roughly as follows:

splitChunks: {
    chunks: 'all',
    cacheGroups: {
        library: {
            test: /[\\/]library[\\/]/,
        },
    },
}

Answer 1

The problem is the unexpected inclusion of babel-plugin-dynamic-import-node, which converts dynamic imports (for async loading) into regular require within the node environment, preventing any async blocks from being generated. The solution is to remove it (or only include it when running unit tests).