• • bounty将在4天后过期**。回答此问题可获得+50声望奖励。mariaines希望引起更多人对此问题的关注：超级困惑这种行为，真的会感谢一些指导!

我正在使用React.lazy尝试从主应用程序中分离出一些代码，但是它没有按照我期望的方式工作，而且我在弄清楚如何调试时遇到了麻烦。
我的代码如下所示：

// 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';
...

我想要的：

• vendors.chunk.js:React
• main.chunk.js:index.js
• main-1.chunk.js:component.js
• library-0.chunk.js:库/实用程序
• library-1.chunk.js:库/组件
• 索引. html：主数据块. js，库-0.数据块. js，供应商.数据块. js
• 异步块：主文件-1.chunk.js，存储库文件-1.chunk.js

我得到的：

• vendors.chunk.js:React
• main.chunk.js:js+组件. js
• library.chunk.js:库/实用程序+库/组件
• 索引. html：主数据块. js、库数据块. js、供应商数据块. js
• 异步块：无

因此，我的初始页面加载需要加载所有JS，因此性能较差。
我怎样才能强制webpack将library拆分成多个块，这样我就可以利用异步块了？更好的是，我怎样去调试这样的东西呢？
我的配置如下所示：

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