Webpack 4.4.1：splitChunks 的性能问题

Question

我正在开发一个包含大量代码的旧项目。这个项目使用 Webpack 3.8.1，我正在尝试更新到 4.4.1，这真是一个障碍！

\n\n

主要的痛苦是项目使用 CommonsChunkPlugin：

\n\n

new CommonsChunkPlugin({\n    name: \'common\',\n    minChunks: 3,\n    chunks: _.without(_.keys(entry), \'ace-iframe\', \'custom-theme-ace\'),\n}),\n\nnew CommonsChunkPlugin({\n    name: \'vendors\',\n    minChunks(module, count) {\n        return isVendorModule(module) && count >= 2;\n    },\n    chunks: _.without(_.keys(entry), \'ace-iframe\', \'custom-theme-ace\'),\n})\n

\n\n

我知道Webpack 4不再提供CommonsChunkPlugin。非常感谢以下文章，它们节省了研究时间：

\n\n

\n
• https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
\n
• https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
\n

\n\n

感谢这些令人惊叹的链接，我用以下几行替换了 CommonsChunkPlugin：

\n\n

optimization: {\n    splitChunks: {\n        cacheGroups: {\n            vendors: {\n                priority: 50,\n                    name: \'vendors\',\n                    chunks: \'async\',\n                    reuseExistingChunk: true,\n                    minChunks: 2,\n                    enforce: true,\n                    test: /node_modules/,\n                },\n\n                common: {\n                    name: \'common\',\n                    priority: 10,\n                    chunks: \'async\',\n                    reuseExistingChunk: true,\n                    minChunks: 2,\n                    enforce: true,\n                },\n            },\n        },\n    },\n},\n

\n\n

由于此配置，应用程序可以正确构建，创建块并且应用程序按预期运行。\n但是构建时间非常慢：超过 7 分钟！

\n\n

有趣的是，如果我完全删除整个optimization.splitChunks配置，应用程序仍然可以完美运行，并且构建时间仍然在 7 分钟左右：这完全就像我在optimization.splitChunks毫无用处一样。

\n\n

我尝试过更改chunks属性：说实话我不太了解它的作用...
\n如果我将它们设置为all，构建速度会更快：大约 1 分钟。

\n\n

但不幸的是，从我的入口点生成的文件运行不佳：Webpack 似乎在执行我自己的代码之前等待加载块：

\n\n

// Code from webpack\nfunction checkDeferredModules() {\n    var result;\n    for(var i = 0; i < deferredModules.length; i++) {\n        var deferredModule = deferredModules[i];\n        var fulfilled = true;\n        for(var j = 1; j < deferredModule.length; j++) {\n            var depId = deferredModule[j];\n            if(installedChunks[depId] !== 0) fulfilled = false;\n        }\n\n        // If I understand well, Webpack checked that deferred modules are loaded\n        if(fulfilled) {\n            // If so, it runs the code of my entry point\n            deferredModules.splice(i--, 1);\n            result = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n        }\n    }\n    return result;\n}\n

\n\n

请告诉我，我在这里没有错：Webpack 似乎等待加载延迟模块，但它不会运行实际加载它们的代码......我该如何使其工作？

\n\n

简单来说：

\n\n

\n
• chunks设置为async一切正常，但构建时间不可行（超过 7 分钟）
\n
• chunks设置为all构建时间是正确的（大约1分钟），但我的代码没有运行 \xc2\xaf\\_(\xe3\x83\x84)_/\xc2\xaf
\n

\n\n

很抱歉这篇长文章，但如果有人可以帮助我在正确的构建时间下完成所有这些工作，那就完美了。

\n\n

或者至少帮助我理解这一切应该如何工作，官方文档不是很有帮助:(

\n\n

提前致谢！

\n\n

编辑：尽管有 700 万的构建时间，我还是尝试继续chunksset to 。\n我有 20 个入口点，如果我在其中一个入口点中添加导入 jQuery 和 jQuery-UI 的指令，则构建时间会增加一倍。\n如果我将它添加到 5 个文件中，构建就会崩溃：async
import

\n\n

\n

<--- 最后几次 GC --->

\n\n

[15623:0x103000000] 222145 ms: 标记扫描 1405.0 (1717.4) ->\n 1405.2 (1717.4) MB, 671.3 / 0.0 ms 分配失败 GC 在旧空间请求 [15623:0x103000000] 222807 ms: 标记扫描 1 405.2\n （1717.4） - > 1405.0（1667.9）MB，662.4 / 0.0 ms的最后一个度假胜地GC在旧\ n要求[15623：0x103000000] 223475 ms：Mark -sweep 1405.0 \ n（1667.9） - 1667.9） - > 1405.1（1405.1（1645.4）MB，667.1 MB，667。1.1。 / 0.0 毫秒 最后手段 GC 在旧\n 请求的空间中

\n\n

<--- JS 堆栈跟踪 --->

\n\n

==== JS 堆栈跟踪 ===========================================

\n\n

安全上下文：0x1b6415c25ee1 \n 1: fromString(又名 fromString) [buffer.js:~298] [pc=0x1973a88756aa](this=0x1b6462b82311\n ,string=0x1b642d3fe779 ,encoding=0x1b6462b82311 )\n 3: 来自 [buffer .js ：177] [字节码=0x1b6488c3b7c1偏移=11]（这=0x1b644b936599，值=0x1b642d3fe779，encodingOrOffset=0x1b6462b82311\n\n

>> 致命错误：CALL_AND_RETRY_LAST 分配失败 - JavaScript 堆内存不足

\n

\n\n

内存不足...我想设置chunks为async不是解决此问题的正确方法：/

\n