Require.js 什么时候加载文件？

Question

什么决定了 Require.js 加载所需文件的时间？脚本一执行就加载了吗？在 DOMContentLoaded 之后？还有别的吗？

我正在分析一个我想优化的页面，我经常注意到的一件事是 Require 比其他脚本明显更晚触发，可能是什么原因？

Answer 1

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

听起来您在页面中使用了多个脚本标签，所以如果我不得不猜测，我会说 RequireJS 依赖项只是比其他脚本标签晚加载。 Here's a whole bunch of info on the load and execute order of script tags.

否则，我对 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 的任何依赖链。如果在此之前的任何代码引入了延迟（比如等待某些东西加载，或者如果它被包装在 jQuery DOMReady 中），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 whole-project optimizer 将所有内容编译到一个文件中，所以一旦它加载，整个应用程序就会被加载（300kb 左右）。

综上所述，RequireJS 库会在浏览器遇到脚本标签时立即加载。以这种方式加载的代码会立即执行。假设我正确理解 RequireJS，该库将立即尝试加载 data-main 文件 - 我相信这是异步完成的。

每次遇到模块时，RequireJS 都会加载它们 asynchronously。您看到的任何延迟都可能与此有关。

Require.js 什么时候加载文件？

When does Require.js load files?

javascript

requirejs