我正在使用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[\\/]/,
},
},
}
1条答案
按热度按时间toe950271#
这个问题是偶然包含了
babel-plugin-dynamic-import-node
,它将动态导入(异步加载所需的)转换为节点环境的常规需求,从而防止生成任何异步块。解决方案是删除它(或者只在运行单元测试时包含它)。