Как модули загружаются динамически, если существует только один связанный JavaScript-файл?

Question

Я знаю, что при использовании загрузчика модулей, такого как веб-пакет, в результате получается один файл JavaScript, например bundle.js, Сейчас в index.html Мне нужно только сослаться на следующее:

<script src="bundle.js"></script>

Мой вопрос, если у меня есть один .js файл, как происходит динамическая загрузка модуля? Может быть, я далеко здесь в моем понимании, но не вся идея загрузчика модуля, чтобы не сервер модуля .js файл пока не нужен? Следовательно, не нужно загружать все файлы с самого начала приложения и index.html, Хорошо, если я уже подал этот сингл bundle.js файл из index.htmlКак отдельные модули в этом файле обслуживаются асинхронно и только по мере необходимости? В тот момент я чувствовал, что уже принял удар на загрузку файла, поэтому часть производительности не достигнута.

Как работают загрузчики модулей, когда только один пакет .js файл подается для всего приложения?

Answer 1

Когда вы используете Webpack таким образом, вы не используете загрузчики модулей или динамическую загрузку. Webpack - это пакет модулей, который означает, что он разрешает все необходимые модули, объединяет их в один файл и позволяет включить его в свою веб-страницу (или там, где вы хотите использовать код).

Если бы вы работали в среде, где поддерживалась загрузка модулей, вам даже не понадобился бы Webpack (не занимаясь минимизацией, переносом или полифиллингом здесь). Вы бы просто использовали загрузку модуля и все.

Answer 2

Как и рекомендовали другие, вас может заинтересовать разделение кода в веб-пакете. Я также новичок в вебпаке, но я так понимаю.

app.js:

var $ = require('jquery'); // adds contents of jquery.js into the global bundle

// do stuff on runtime

module.exports = (function () {

    // do stuff above the fold (but only if app() is called)

    // time to use a module from outside of our bundle
    require.ensure([
        "./below_the_fold.js" // here you define which files will the new chunk contain (it is created on webpack compile)
    ], (require) => {
        // callback after the chunk is dynamically loaded by JSONP

        var moduleBelow = require("./below_the_fold.js"); // this particular require() which is inside require.ensure doesn't add required file into the bundle

        // do stuff below the fold (that needs moduleBelow which is what below_the_fold.js exports)

    }, 'below_the_fold'); // optional name of chunk file

});

window.app = module.exports

below_the_fold.js:

module.exports = (() => {
    // some logic we don't want into our global bundle because it's heavy or rarely used

    console.log('doing stuff below the fold is now possible');
})();