javascript - 如何使用浏览器并行加载但仍然使用 RequireJS 保持脚本的顺序

Question

我有一个 friend ，他讨厌 RequireJS，我最近开始使用它并且我喜欢它，但是根据他的论点，我开始觉得我可能最终会喜欢他并放弃使用 需要JS。

require(['one'],function(){
    require(['two'],function(){
        require(['three'],function(){

        });
    });
});

上面的代码相当简单，three 依赖于two & two 依赖于one。这使得浏览器依次加载 one 然后 two 然后 three ，这就是 requirejs 处理它的方式，如果有很多此类依赖项，这会使站点变得非常慢。

浏览器并行加载功能它根本没有使用。

我想知道是否有任何方法可以让 require 异步加载所有这些文件，但确保在执行时保持顺序，以便可以使用浏览器并行性。

Answer 1

RequireJS 是一个强大的工具，它允许我们异步加载脚本(意味着我们开始加载每个脚本，而不是等到它实际加载)，但仍然管理依赖关系(如果一个文件依赖另一个文件，我们想要唤醒确保预先加载依赖项)。您使用 RequireJS 的方式不是它的用途。一旦加载依赖模块('一'、'二'、'三')，就会调用 require 中的回调函数。所以你只是顺序加载所有模块，而不是异步加载(加载一个 ->调用回调函数 ->加载两个 ->调用回调函数 ->加载三个 ->调用回调函数)。这是没有意义的。它应该是这样的:

在您的 HTML 文件中:

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

在你的 main.js 文件中(一些你在脚本标签中写成 data-main 的文件):

require(['one'], function(one){
    one.function1();
});

在 one.js 中:

define(['two', 'three'], function(two, three) {
    return {
        function1 : function() {
            two.function2();
            three.function3();
            console.log('one');
        }
    }
});

在 two.js 中:

define([], function() {
    return {
        function2 : function() {
            console.log('two');
        }
    }
});

在 three.js 中:

define([], function() {
    return {
        function3 : function() {
            console.log('three');
        }
    }
});

在我的示例中，“一”依赖于“二”和“三”(它需要“二”的 function2() 和“三”的 function3())，“二”和“三”没有依赖关系。此示例代码假定所有文件都在一个文件夹中(包括 require.js)。结果，我们看到打印了“二”、“三”、“一”(按此顺序)。