Блог

Главная - Вопросы по программированию - Как Webpack требует.убедитесь, что вы определяете зависимости для загрузки?

Как Webpack требует.убедитесь, что вы определяете зависимости для загрузки?

#webpack #webpack-5

Вопрос:

Я отлаживал проблему со слишком большим количеством загружаемых блоков и определил, что инициатором загрузки многих моих блоков является 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 файл, содержащий __webpack_require__.e вызовы для 80 блоков. Вот как выглядит «внутренняя версия webpack» вышеупомянутого модуля (со многими требованиями, удаленными для краткости):

 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 их, сам по себе не имеет явных зависимостей?

Ответ №1:

Похоже, я неправильно понял цель chunkName аргументации require.ensure . Я думал , что зависимости, необходимые для обратного вызова, будут добавлены в группу блоков, указанную chunkName , но что только те необходимые зависимости будут фактически загружены этим конкретным require.ensure во время выполнения.

На самом деле, это делает две вещи. Он добавляет зависимости обратного вызова в группу блоков, но также загружает все фрагменты из этой группы блоков во время выполнения, независимо от того, как эти фрагменты оказались в этой группе блоков.

Итак, в приведенном выше примере, указав my-chunk в моем пустом require.ensure поле, я по-прежнему вызываю загрузку всех фрагментов, входящих в my-chunk группу, из других частей кода. Вот откуда шли 80 кусков.

Метки: ,