Question

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

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

new CommonsChunkPlugin({
    name: 'common',
    minChunks: 3,
    chunks: _.without(_.keys(entry), 'ace-iframe', 'custom-theme-ace'),
}),

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

我知道Webpack 4不再提供CommonsChunkPlugin了。非常感谢以下文章，他们节省了数小时的研究成果：

感谢这些惊人的链接，我用这些代替了CommonsChunkPlugin：

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

                common: {
                    name: 'common',
                    priority: 10,
                    chunks: 'async',
                    reuseExistingChunk: true,
                    minChunks: 2,
                    enforce: true,
                },
            },
        },
    },
},

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

有趣的是，如果我完全删除整个optimization.splitChunks配置，应用程序仍然可以完美运行，并且构建时间仍然是大约7分钟：它完全像我在optimization.splitChunks中所做的那样无用的。

我试图更改chunks属性：说实话我真的不明白它的作用......
如果我将它们设置为all，则构建速度会更快：大约1分钟。

但遗憾的是，我的条目点生成的文件运行不正常：Webpack似乎在执行自己的代码之前等待加载块：

// Code from webpack
function checkDeferredModules() {
    var result;
    for(var i = 0; i < deferredModules.length; i++) {
        var deferredModule = deferredModules[i];
        var fulfilled = true;
        for(var j = 1; j < deferredModule.length; j++) {
            var depId = deferredModule[j];
            if(installedChunks[depId] !== 0) fulfilled = false;
        }

        // If I understand well, Webpack checked that deferred modules are loaded
        if(fulfilled) {
            // If so, it runs the code of my entry point
            deferredModules.splice(i--, 1);
            result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
        }
    }
    return result;
}

请告诉我这里我没有错：Webpack似乎等待延期模块被加载，但是它没有运行实际加载它们的代码......我想如何使这个工作？

简而言之：

将chunks设置为async：一切正常，但建设时间不可行（超过7分钟）
chunks设置为all：构建时间正确（大约1分钟），但我的代码没有运行¯\ _（ツ）_ /¯

对于这篇长篇文章感到抱歉，但是如果有人可以帮助我完成所有这些工作并且正确的建设时间，那将是完美的。

或者至少帮助我了解所有这些应该如何工作，官方文档不是很有帮助：（

提前致谢！

编辑：尽管建设时间为7百万，但我仍尝试将chunks设置为async。我有20个入口点，如果我在其中一个中添加import指令导入jQuery和jQuery-UI，则构建时间会加倍。
如果我将它添加到5个文件中，则构建崩溃：

＆lt; ---最后几个GC ---＆gt;

[15623：0x103000000] 222145 ms：Mark-sweep 1405.0（1717.4） - ＆gt;   1405.2（1717.4）MB，671.3 / 0.0 ms分配失败请求旧空间中的GC [15623：0x103000000] 222807 ms：标记扫描1405.2   （1717.4） - ＆gt; 1405.0（1667.9）MB，662.4 / 0.0 ms最后的GC旧   请求的空间[15623：0x103000000] 223475 ms：标记扫描1405.0   （1667.9） - ＆gt; 1405.1（1645.4）MB，667.1 / 0.0 ms最后的GC旧   请求空间

＆lt; --- JS stacktrace ---＆gt;

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

安全上下文：0x1b6415c25ee1          1：fromString（又名fromString）[buffer.js：~298] [pc = 0x1973a88756aa]（这= 0x1b6462b82311   ，string = 0x1b642d3fe779，encoding = 0x1b6462b82311）          3：来自[buffer.js：177] [bytecode = 0x1b6488c3b7c1 offset = 11]（这= 0x1b644b936599，值= 0x1b642d3fe779，encodingOrOffset = 0x1b6462b82311

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

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

Webpack 4.4.1：splitChunks

0 个答案: