Require.js何时加载文件

When does Require.js load files?

本文关键字：文件 加载 何时 js Require      更新时间：2023-09-26

是什么决定了Require.js加载所需文件的早期时间？脚本执行后是否立即执行加载？DOMContentLoaded之后？还有别的吗？

我正在分析一个我想优化的页面，我经常注意到的一件事是，Require的启动时间明显晚于其他脚本，原因是什么？

JRBurke有时会在这里闲逛，所以他会比我回答得更好，因为我只是要做一些假设。

听起来你在页面中使用了多个脚本标记，所以如果我不得不猜测的话，我会说RequireJS依赖项只是比其他脚本标记加载得晚。这里有一大堆关于脚本标签的加载和执行顺序的信息。

否则，我对RequireJS的理解是，它根据需要加载东西。想象一下你的RequireJS标签是这样的：

<script src="lib/require.js" data-main="main.js"></script>

如果您的main.js文件如下所示：

requirejs.config({ /*conf */ });

然后RequireJS加载主文件，该文件配置RequireJS，而不执行任何操作。稍后，也许你的一个文件看起来是这样的：

/* code, code code */
require(
    ['dist/module'],
    function( distModule ){
        /* code code code */
    }
);

在这个点，Require将开始触发请求以解析dist/module的任何依赖链。如果在此之前的任何代码引入了延迟（比如等待加载，或者如果它被封装在jQueryDOMReady中），RequireJS将不会开始加载模块，直到所有这些延迟都得到解决。

我的情况有点不同，这可能会提供一些见解。我在整个应用程序中只有一个脚本标记：

<script src="vendor/require.js" data-main="build/app"></script>

我的主文件如下：

requirejs.config({ /*conf */ });
require(
    ['dist/module1', 'dist/module2'],
    function( distModule1, distModule2 ){
        /* code code code */
    }
);

distModule1和distModule2启动整个应用程序的加载，并启动每个请求以获得主视图所需的内容。当我在应用程序中移动时，它会发出一个请求，以获取后续视图所需的内容。实际上，我已经使用r.js整个项目优化器将所有内容编译到一个文件中，因此一旦加载，就会加载整个应用程序（300kb左右）。

总之，只要浏览器遇到脚本标记，就会加载RequireJS库。以这种方式加载的代码会立即执行。假设我正确理解RequireJS，那么库将立即尝试加载data-main文件——我相信这是异步完成的。

每次遇到模块时，RequireJS都会异步加载它们。你看到的任何延误都可能与此有关。

相关文章：