Question

我对并行脚本加载步骤毫无疑问，但我想知道RequireJS如何控制并行加载脚本的执行顺序。

示例定义如下。

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

main.js：

define(['a', 'b'], function() {
    window.alert("scheduler loaded!");
})

如何确保在b.js之前执行a.js？并且当获取main.js并解析依赖关系时，如何稍后处理它以使其在dom中显示为脚本元素而无需另外的http提取。当我们将脚本元素添加到dom时，总会有一个http fetch（没有启用缓存的情况），不是吗？

Answer 1

您的main.js脚本实际上已作为<script>标记加载并先运行;只是在加载a和b之前，它内部的函数才会运行。如果您使用requirejs，则无需自己添加任何脚本标记。

要确保a的内容功能在b之前运行，只需将a定义为b

内的依赖关系

// b.js
define(['a'], function(a) {
  // use a for initiation here
}

如果您向该数组添加'c'，则c也将成为main.js的间接依赖关系。

编辑：在回应评论时，这可能会更好地理解。每个编号的项目都是一个HTTP请求。

检索到HTML
Requirejs本身是第一个看到的脚本，因此首先加载。
Requirejs看到其标记具有data-main属性，因此将main.js检索为<script>标记。一旦main.js加载完毕，它就会在其内部运行该函数，但是，看起来这个文件还有尚未加载的依赖项（数组）。因此，它同时为......创建<script>标签。
a.js
和b.js。现在，让我们说这个首先完成加载 - 也许a.js真的很大。但！看起来b有一个依赖 - 在A.所以，它还不会运行内部函数。 Requirejs知道它已经在等待a.js的脚本标记，所以它不会发出单独的请求 - 它可以等待它。一旦加载，一个函数运行，然后是b，然后是main。

这里没有浪费HTTP请求 - 一旦知道了依赖关系，Requirejs就会发出请求，并且不会多次请求单个脚本，除非在极少数情况下它无法知道某些内容将会是什么加载。

这种罕见场合的一个例子可能是SmallWidget.js是一个单独的依赖项，编译成一个名为BundleOfWidgets.js的大文件。（对于最终版本，许多脚本经常被包装成一个）如果一个脚本请求BundleOfWidgets.js但是另一个脚本在它到达之前请求SmallWidget.js，它将不知道它实际上正在加载SmallWidget.js在一个大包中，所以它将自己检索该单个文件。

RequireJS：如何控制并行加载的js脚本的执行顺序

1 个答案: