时间戳

首页 > 解决方案 > Webpack 如何 require.ensure 确定要加载的依赖项？

webpack - Webpack 如何 require.ensure 确定要加载的依赖项？

问题描述

我一直在调试加载太多块的问题，并且我已经确定加载我的许多块的发起者是require.ensure调用。

为了简化问题，我开始注释掉代码以查看它如何影响块加载。令我惊讶的是，即使我已经注释掉了除了一些管道之外的所有代码，我仍然看到require.ensure加载了很多块。

在其最极端的简化版本中，这里是包含require.ensure. 这实际上就是一切：

export function myFunction(options) {
    return new Promise(function(resolve, reject) {
        function success(data, status, xhr) {
            require.ensure([], function() {
                // body removed...
            }, "my-chunk");
        }
        success(null, null, null);
    });
}

当 webpack 处理这个require.ensure时，它会生成一个Promise.all包含80 个块__webpack_require__.e的调用。这就是上述模块的“webpack internal”版本的样子（为简洁起见，删除了许多要求）：

Object.defineProperty(exports, "__esModule", ({
    value: true
}));
exports.myFunction = myFunction;

function myFunction(options) {
    return new Promise(function(resolve, reject) {
        function success(data, status, xhr) {
            Promise.all( /* require.ensure | my-chunk */ [
                __webpack_require__.e("chunk1"), 
                __webpack_require__.e("chunk2"),

                ... 77 more __webpack_require__.e calls

                __webpack_require__.e("my-chunk")]).then((function() { 
                    
                    // body removed...
            }).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
        }

        success(null, null, null);
    });
}

require.ensure我的问题是，如果包含 的模块本身没有明确的依赖关系，这些依赖关系来自哪里？

标签： webpackwebpack-5

解决方案

看来我误解了 的chunkName论点的目的require.ensure。我曾认为回调所需的依赖项将添加到由指定的块组中chunkName，但只有那些需要的依赖项才会require.ensure在运行时由这个特定的实际加载。

事实上，它做了两件事。它确实将回调依赖项添加到块组中，但它还在运行时从该块组加载所有块，无论这些块如何最终进入该块组。

因此，在我上面的示例中，通过my-chunk在我的空白中指定，我仍然会导致从代码的其他部分加载require.ensure属于组的所有块。my-chunk这就是 80 个块的来源。

推荐阅读