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

【问题标题】：CRA: Extract particularly big modules into separate chunks?CRA：将特别大的模块提取到单独的块中？
【发布时间】：2020-08-16 18:25:44
【问题描述】：

使用最新的 CRA。所有node_modules 都捆绑到一个单独的块中，这很好。但是那个块的大小仍然超过几兆字节。同时，我看不到在 CRA 中覆盖或自定义分块逻辑的任何选项。基本上我想从node_modules 块中提取特别大的模块，并将它们完全加载为单独的块。不弹出可以吗？

【问题讨论】：

标签： reactjs webpack create-react-app code-splitting

【解决方案1】：

就像 Dennis 提到的，React.lazy 是一种好方法。但是，如果您想完全控制来自 node_modules 或实际来自项目中任何地方的模块 - 请查看webpack splitchunks

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

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

例如，这里我是说将 monaco-editor 目录下的所有模块（文件）放入一个存储桶中 - 此存储桶稍后将分成多个块，每个块的最小大小为 MinChunkSize，最大大小为 MaxChunkSize。

vendor chunk 是 webpack 添加的自动缓存组。 - 它从node_modules中拉出所有没有动态加载的模块并将它们放在一个块中。

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

cacheGroups: {
    defaultVendors: null
}

您可以定义自己的简单/复杂 node_modules 分发。您可以定义某些包以始终转到某些块。这样，除非您升级其中一个软件包版本，否则块缓存不会更改 - 这是提高性能的良好做法，因为此缓存很可能从缓存中提供。

这是一个更复杂的例子，它有利于性能：

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
                },
            }
        }
    }

在这个例子中，每个包都会被推送到它自己的存储桶中。现在存储桶将按最小/最大大小合并或拆分。

【讨论】：

CRA 预先配置了块拆分，问题是它不允许您自定义。

【解决方案2】：

是的，React.Lazy 会将特定组件与主块分开。

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

见Code-Splitting。

如果您不想弹出，请参阅 react-app-rewired 或使用 CRA 以外的其他服务，例如 Gatsby。

【讨论】：

main chunk 没那么大，所以暂时不用担心，我想拆分 vendor chunk（包含所有 node_modules 的那个）
您必须弹出或使用 react-app-rewired。