Reactjs CRA：将特别大的模块提取到单独的块中？

使用最新的CRA。所有的

node\u模块

都被捆绑到一个单独的块中，这很好。但这个数据块的大小仍然超过了几兆字节。同时，我看不到在CRA中覆盖或自定义分块逻辑的任何选项。基本上，我想从

node\u modules

块中提取特别大的模块，并将它们作为单独的块完全加载。可以不弹出吗？

可以，这样可以将特定组件从主块中分离出来

const OtherComponent = React.lazy(() => import('./OtherComponent'));

看

如果您不想退出，请查看或使用CRA以外的其他服务，就像Dennis提到的那样。

是一个好方法。 但是，如果您想完全控制来自node_模块或实际上来自项目中任何地方的模块，请查看

这将使您能够决定哪个模块进入哪个块。 一个简单的例子：

optimization: {
        splitChunks: {
            cacheGroups: {
                monaco_editor: {
                    test: /monceo-editor[\\/]/,
                    name: 'monaco_editor',
                    maxSize: MaxChunkSize,
                    minSize: MinChunkSize
                },
            }
        }
    }

例如，我在这里说，将所有模块（文件）放在monaco editor目录下，并将它们放在一个bucket中-该bucket稍后将被分离为多个块，每个块的最小大小为MinChunkSize，最大大小为MaxChunkSize

供应商区块是由webpack添加的自动缓存组。-它从未动态加载的节点模块中提取所有模块，并将它们放在一个块中。

您可以通过以下设置禁用此行为：

cacheGroups: {
    defaultVendors: null
}

您可以定义自己的简单/复杂节点分布。您可以将某些包定义为始终转到某些块。这样，除非您升级其中一个包版本，否则块缓存不会更改-这是性能方面的良好实践，因为此缓存很可能由缓存提供服务

下面是一个更复杂的示例，它有助于提高性能：

optimization: {
        splitChunks: {
            cacheGroups: {
                myVendor: {
                    test: /node_modules[\\/]/,
                    name(module) {
                        const matched = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/);
                        const packageName = matched && matched.length > 2 ? matched[1] : undefined;

                        return packageName;
                    },
                    maxSize: MaxChunkSize,
                    minSize: MinChunkSize
                },
            }
        }
    }

---

在本例中，每个包将被推送到它自己的桶中。现在bucket将按最小/最大大小合并或拆分。

主块没有那么大，所以现在不必担心，我想拆分供应商块（包含所有节点模块的块），您必须弹出或使用react-app-rewired。块拆分是用CRA预配置的，问题是它不允许您自定义自身。