3

我正在处理一个包含大量代码的旧项目。这个项目使用 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 分钟），但我的代码没有运行¯\_(ツ)_/¯

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

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

提前致谢！

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

<--- 最近几次 GC --->

[15623:0x103000000] 222145 ms: 标记扫描 1405.0 (1717.4) -> 1405.2 (1717.4) MB, 671.3 / 0.0 ms 分配失败 GC 在旧空间请求 [15623:0x103000000] 222807 毫秒 (1717.4) -405.2。 > 1405.0 (1667.9) MB, 662.4 / 0.0 ms 最后手段 GC 在旧空间请求 [15623:0x103000000] 223475 ms: 标记扫描 1405.0 (1667.9) -> 1405.1 (1645.4) MB, 667.1 / 0.0 ms 最后手段 GC 在旧要求的空间

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

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

安全上下文：0x1b6415c25ee1 1：fromString(aka fromString) [buffer.js:~298] [pc=0x1973a88756aa](this=0x1b6462b82311 ,string=0x1b642d3fe779 ,encoding=0x1b6462b82311 ) 3: from [buffer.js:177] [bytecode= 0x1b6488c3b7c1 offset=11](this=0x1b644b936599,value=0x1b642d3fe779,encodingOrOffset=0x1b6462b82311

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

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

4

0 回答 0