（Angular2 RC5）如何使用可以由路由器延迟加载的SystemJS为每个模块创建一个包？

Question

我正在转换我的Angular2 RC5应用程序以使用路由器 。 我还使用Angular2编译器（ngc）提前编译，然后将App文件连接并缩小为bundle.min.js，将外部库连接到单独的“vendor”文件中。 我使用Browserify'standalone '选项创建UMD包，然后将其包含在带有脚本标记的index.html中。 我可以省去“System.import（'app'）。catch（...）”这样的脚本。

现在我想懒洋洋地加载Angular2模块，同时仍然在捆绑包中提供我的应用程序以减少加载时间。 我可以在没有将我的代码捆绑在开发构建中的情况下进行延迟加载，但是在创建具有捆绑和缩小的生产构建时，我不知道如何使其工作。

看起来我需要使用SystemJS构建器来创建包（可能每个模块一个）。 我不知道从哪里去。

非常感谢任何帮助。

Answer 1

我可以在这里提供一般大纲。

npm install systemjs-builder

为模块创建一个包。 在最简单的情况下，让我们假设已经编译了所有的typescript并且您不需要在构建时运行typescript编译器（否则您将需要为typescript安装和配置systemjs插件 ）

以下build.js文件完成Angular 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以查看是否存在某些已包含在其他某个bundle中的依赖项 - 然后您需要将其从构建中排除，无论是在systemjs.config.js中还是在build.js中，例如在后者中（在加载主配置之后）：

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

然后，对于延迟加载，当需要导入bundle中的第一个模块时，您需要告诉SystemJS加载bundle（并在其中注册所有模块）。 根据文档 ，这是如何在systemjs.config.js（未测试）中执行此操作：

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

我不确定的是模块名称是否必须与bundle中System.registerDynamic调用中使用的名称匹配，或者是否用于在源代码中导入它们的名称。