我使用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
- 库-0.chunk.js:库/utils
- 库-1.chunk.js:库/组件
- Index.html:main.chunk.js，库-0.chunk.js，vendors.chunk.js
- 异步块:main-1.chunk.js，库-1.chunk.js
我得到的是:
- Vendors.chunk.js:react
- Main.chunk.js:index.js + component.js
- Js:库/utils+库/组件
- Index.html:main.chunk.js、Library.chunk.js、vendors.chunk.js
- 异步块:无
因此，我的初始页面加载需要加载所有的JS，因此性能较差.
我如何迫使webpack将library拆分成多个块，以便我可以利用异步块？更好的是，我如何开始调试这样的东西？
我的配置如下所示:
splitChunks: {
chunks: 'all',
cacheGroups: {
library: {
test: /[\\/]library[\\/]/,
},
},
}