僅在單頁應用程序中需要時才從服務器加載第三方JS

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才會被調用，並且angular被加載。

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