使用React.lazy进行webpack代码分割的调试方法

Question

我正在使用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：反应
• main.chunk.js：index.js
• main-1.chunk.js：组件.js
• library-0.chunk.js：库/utils
• library-1.chunk.js：库/组件
• index.html：main.chunk.js、library-0.chunk.js、vendors.chunk.js
• 异步块：main-1.chunk.js, library-1.chunk.js

我得到的是：

• vendors.chunk.js：反应
• main.chunk.js：index.js + component.js
• library.chunk.js：库/utils + 库/组件
• index.html：main.chunk.js、library.chunk.js、vendors.chunk.js
• 异步块：无

因此，我的初始页面加载需要加载所有的JS，从而导致性能较差。

我如何强制webpack将library拆分成多个块，以便我可以利用异步块？更好的是，我如何调试这样的问题？

我的配置大致如下：

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

Answer 1

问题是意外包含了babel-plugin-dynamic-import-node，它将动态导入（用于异步加载）转换为节点环境中的常规require，从而阻止生成任何异步块。解决方案是删除它（或仅在运行单元测试时包含它）。