javascript - 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 开始加载整个应用程序，并将触发每个请求以获取主视图所需的内容。当我在应用程序中移动时，它会发出一个请求以获取后续 View 所需的内容。我实际上用过 r.js whole-project optimizer将所有内容编译到单个文件中，因此一旦加载，整个应用程序就会加载(300kb 左右)。

<小时/>

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

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