Question

我知道在使用像 webpack 这样的模块加载器时，结果输出将是一个像bundle.js这样的JavaScript文件。现在在index.html我只需要参考以下内容：

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

我的问题是，如果我有一个.js文件，动态模块加载是如何发生的？也许在我的理解中我离开这里，但是在需要之前，不是不服务器模块.js文件的模块加载器的全部想法？因此，无需从应用程序的开头加载所有文件index.html。好吧，如果我已经从bundle.js提供了单个index.html文件，那么该文件中的单独模块如何仅在需要时才提供异步？那时我觉得我已经下载了文件，因此没有获得性能部分。

当整个应用只提供一个捆绑的.js文件时，模块加载器如何工作？

Answer 1

当您以这种方式使用Webpack时，您不会使用任何模块加载器或动态加载。 Webpack是一个模块 bundler ，这意味着它可以解析所有必需的模块，将它们组合成一个文件，并允许您将其包含在您的网页中（或者您想要使用代码的任何地方）。

如果您在支持模块加载的环境中工作，您甚至不需要Webpack（此处不会进行缩小，转换或填充）。你只需要使用模块加载即可。

Answer 2

正如其他人推荐的那样，您可能感兴趣的是webpack的代码拆分。我也是webpack的新手，但这就是我理解它的方式。

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');
})();

如果只有一个捆绑的JavaScript文件，模块如何动态加载？

2 个答案: