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

Question

我正在将我的 Angular2 RC5 应用程序转换为使用 router 。我还使用 Angular2 编译器 (ngc) 提前进行编译，然后将应用程序文件连接并缩小到一个 bundle.min.js 中，并将外部库连接到一个单独的“vendor ”文件中。我正在使用Browserify 'standalone' 选项创建 UMD bundle ，然后将其与 script 标记一起包含在 index.html 中。我可以通过这种方式省略“System.import('app').catch(...)”脚本。

现在我想延迟加载 Angular2 module同时仍然以捆绑形式提供我的应用程序以减少加载时间。我可以在不将代码捆绑在开发构建中的情况下进行延迟加载工作，但是当使用捆绑和缩小创建生产构建时，我不知道如何让它工作。

看起来我需要使用 SystemJS builder创建 bundle (大概每个模块一个)。但我不知道从那里该去哪里。

非常感谢任何帮助。

Answer 1

我可以在这里提供总体轮廓。

npm install systemjs-builder

为模块创建 bundle 。在最简单的情况下，我们假设所有 typescript 都已转译，并且您不需要在构建时运行 typescript 编译器(否则您将需要安装和配置 systemjs plugin for typescript )

以下 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}});

然后，对于延迟加载，您需要告诉 SystemJS 在需要导入包中的第一个模块时加载包(并注册其中的所有模块)。 According to the documentation ，这是在 systemjs.config.js 中执行此操作的方法(未测试):

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

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