使用requirejs仅下载所需的js文件

Question

我正在开发一个应用程序，其中在前端使用了requirejs和骨干网。

我已将requirejs配置为加载所有js文件。

我的main.js文件看起来像这样：

require.config({
    baseUrl: 'js',
    paths: {
        "jquery": 'lib/jquery',
        "jquery.ui.widget" : "lib/jquery.ui.widget",
        "jquery.knob" : "lib/jquery.knob",
        "jquery.iframe-transport" : "lib/jquery.iframe-transport",
        "jquery.fileupload" : "lib/jquery.fileupload",
        "socket" : "lib/socket.io",
        "handlebars": 'lib/handlebars',
        "underscore": 'lib/underscore',
        "bootstrap" : 'lib/bootstrap',
        "backbone": 'lib/backbone',
        "views" : "views",
        "models" : "models",
        "collections" : "collections",
        "text" : "lib/helper/text"
    }
});

require(['jquery',
         'handlebars',
         'underscore',
         'backbone',
         'login',
         'jquery.ui.widget',
         'jquery.knob',
         'jquery.iframe-transport',
         'jquery.fileupload',
        ],function($,
                    Handlebars,
                    _,
                    Backbone,
                    Login){
    Login();
}); 

我的登录文件如下所示：

define(function(require){
    return function(){
        var LoginView = require("views/login_view");
        $("#createAccount").click(function(){           
            $("#signInContainer").addClass("hide");
            $("#register").removeClass("hide");
        });
        var view = new LoginView({el : "body"});
    }
});

视图对象是Backbone.View对象，其开始如下：

define(function(require){
    var User = require("models/user");
    var Dashboard = require("views/dashboard");

  //... rest of the code

}

Login_view.js文件中还需要其他2个js文件。

同样，登录后将要调用的所有其他页面也都具有此类require语句。

问题是：当页面被加载时，所有这样的嵌套需求都将被下载。 例如 登录所需的Dashboard js文件中的require语句也会被下载。

我需要一个仅下载初始文件的解决方案。 仅当我要实例化仪表板对象时，才应下载仪表板内的文件。

Answer 1

您需要更改代码逻辑，并使用requireJS仅在需要时请求js文件。 请参见以下示例，该示例在用户单击页面内的元素时加载仪表板。

define(function(require){
    var User = require("models/user");  

  //...my code
 //ex on user click
 $("#myElement").on("click",function(){

     require(["views/dashboard"],function(Dashboard){

       //code for Dashboard here
     });
 });

}