（Angular2 RC5）如何使用可由路由器延遲加載的SystemJS爲每個模塊創建一個包？

Question

我正在將我的Angular2 RC5應用程序轉換爲使用router。我也提前使用Angular2編譯器（ngc）編譯，然後將應用程序文件連接並縮小爲bundle.min.js，並將外部庫合併爲單獨的「供應商」文件。我正在使用Browserify'standalone'選項創建一個UMD包，然後將其包含在帶有腳本標籤的index.html中。我可以通過這種方式省略「System.import（'app'）。catch（...）」腳本。

現在我想懶惰地加載一個Angular2 module，同時仍然在捆綁服務我的應用程序，以減少加載時間。我可以在不將開發版本中的代碼綁定到工作環境中的情況下進行延遲加載，但在創建捆綁版的生產版本時，我不知道如何使其生效。

它看起來像我需要使用SystemJS builder創建捆綁（大概每個模塊一個）。我不知道該從哪裏出發。

任何援助非常感謝。

Answer 1

我可以在這裏提供大綱。

npm install systemjs-builder 

爲模塊創建一個包。在最簡單的情況下，讓我們假設所有的打字稿已經被轉譯，並且您不需要在構建時運行打字稿編譯器（否則您需要安裝和配置systemjs plugin for typescript）

以下build.js文件執行作業對角2快速入門教程：

var Builder = require('systemjs-builder'); 

var builder = new Builder; 

builder.loadConfig('systemjs.config.js').then(function() { 

    builder.bundle('app/app.module.js', 'app/app.module.bundle.js', {minify: false}); 

}); 

你可能想看看產生app.module.bundle.js，看看是否有是已經包含在其他一些捆綁一些依賴 - 那麼你需要從構建中排除，無論是在systemjs.config.js中還是在build.js中，例如在後者中（加載主配置後）：

bulider.loader.config({meta: {'module-name': {build: false}}); 

然後，對於延遲加載，當需要導入包中的第一個模塊時，需要告訴SystemJS加載包（並註冊所有模塊）。 According to the documentation，這是如何做到這一點的systemjs.config.js（未測試）：

System.config({ 
    bundles: { 
    'path-to-bundle': ['module1', 'module2'] 
    } 
}); 

什麼我不知道這裏是模塊名稱是否必須在包中System.registerDynamic調用中使用的名稱匹配，或您用來將它們導入源中的名稱。