使用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，從而阻止產生任何非同步區塊。解決方案是刪除它（或僅在運行單元測試時包含它）。