Question

我想要做的是加载一些JS依赖项，但只有当我的应用程序需要它们时才能执行此操作。主要目标是表现。

我正在开发一个主要使用AJAX构建的单页面应用程序。应用程序的所有javascript都被分成不同的块，我使用Gulp将其组合并缩小。在构建之前，目录结构类似于下面。

src
  js
    _one.js
    _two.js
    _three.js

我正在使用Bower为应用程序导入许多重要的第三方依赖项，现在它们与我的代码一起连接到我的主脚本文件中。 主要问题是某些依赖项是大文件，但并不一定会被每个用户使用。

在单页面应用程序中，我基本上想要的是能够在require语句中包装一个函数，该函数将提示浏览器立即下载所需的依赖项，然后加载该函数。这需要在没有页面刷新的情况下发生。

我查看了RequireJS和Browserify，但是看起来你只是将依赖关系分成单独的包，无论如何你加载它们。正如我所说，这里的目标是更快的加载时间和更好的整体性能。

Answer 1

您是否考虑过像BottleJS这样的DI框架？

https://github.com/young-steveo/bottlejs

Answer 2

我似乎使用嵌套的require调用来执行你的延迟加载是你正在寻找的东西：

define("/path/1", ["jquery"], function($) {
  $("#path1").text('In 5 seconds, angular will be loaded. The current type is:'+ typeof angular);

  setTimeout(function(){
    require(["angular"], function(angular){
        $("#path2").text('Angular has been loaded. The current type is:'+typeof angular);
    });
  }, 5000);
});

require(["/path/1"]);

在此示例中，在最后一行调用“/ path / 1”时尚未加载Angular。只有五秒钟后才会调用嵌套的require并加载角度。

工作示例：https://jsfiddle.net/hynding/1u41smu7/

仅在需要的单页应用程序

2 个答案: