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[\\/]/, }, }, }