在 systemjs 中捆绑是否有意义答案

【问题标题】：Does bundling in systemjs make sense在 systemjs 中捆绑是否有意义
【发布时间】：2016-05-17 11:48:22
【问题描述】：

我已经使用 Angular 2 (RC.1) 和系统 JS 建立了一个种子项目。我想为生产创建一个静态的单个捆绑包，并捆绑除我自己的开发代码之外的所有内容。这是我过去的正常流程，在使用 systemjs 之前。与 gulp-jspm/systemjs-builder 捆绑后，捆绑文件大于 2 MB（来源）或 1.2 MB强>（缩小）。因为这看起来太大了，所以我使用普通的 jspm CLI 进行了仔细检查，但文件大小是一样的。

使用的命令用于开发模式：

jspm bundle app/bootsrap - [path/to/app/**/*] mybundlename.js --inject

或用于生产：

jspm bundle app/bootstrap mybundlename.js

如果我想要，在生产中拥有 1.2 MB 的文件似乎太大了，例如在带宽有限的移动浏览器上运行我的网络应用程序。特别是因为这是一个几乎没有我的代码的包（只是一个引导文件和一个主要的应用程序组件）。对于相当大的企业应用程序，我的 Angular 1.5 应用程序包通常约为 700kB。

通过查看捆绑包本身，我意识到捆绑了 540 个文件。我很确定我不需要它们中的大部分。

完整的 config.js 可以在这里找到：https://plnkr.co/edit/BhYy5Pu1QbmYJ7Ph5rBO。

最后是我的问题：

在项目中使用 systemJS 时应该捆绑文件，还是应该不捆绑文件，让 systemJS 处理延迟加载？
如果建议使用捆绑，我如何创建一个大小合理且仅包含我的应用实际依赖的文件的捆绑包？

【问题讨论】：

您应该考虑您的应用程序是否会在大部分时间使用 everything （这将使捆绑更便宜），或者它是否主要只是部分使用您的所有资源（在这种情况下，延迟加载可能会更便宜）。你甚至可以疯狂地创建多个包，然后配置 systemjs 为特定模块延迟加载这些包。
嗯，这就是棘手的地方。我添加到 systemjs 配置中的唯一内容是 angular core、http、router、plaftorm-browser-dynamic、ng2-translate、rxjs、zone.js 和 reflect-metadata。所有这些对于启动应用程序都是必不可少的。但是，我真的不知道我需要这些包的哪些部分（哪些 JS 文件），并且 bundle 似乎收集了那里的每个文件。您可以在 plunker 中查看完整列表。
看来 Angular 2 仍在努力：github.com/angular/angular/issues/7793#issuecomment-202653154

标签： angular gulp systemjs jspm

【解决方案1】：

通过最新的演示和 RC3，我更改了 system.JS 流程，现在包的大小要小得多。尽管如此，RxJS 还是为故事带来了太多东西，希望它在未来会得到优化。

这就是我现在拥有的：

var map = {
    'hub': 'src/app',
    'rxjs': 'node_modules/rxjs',
    '@angular': 'node_modules/@angular',
    'ng2-translate': 'node_modules/ng2-translate'
};

var packages = {
    'hub': { main: 'main', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'ng2-translate': {
        defaultExtension: 'js', main: 'ng2-translate.js'
    }
};

var packageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router'
];

packageNames.forEach(function(pkgName) {
    packages['@angular/' + pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
});

System.config({
    defaultJSExtensions: true,
    map: map,
    packages: packages
});

在 DEV 上创建一个包后，我像这样加载它：

System.import('lib/bootstrap').then(function(){
    System.import('app/main');
});

角度 polyfill（es6-shim、反射元数据和 zone.js）的大小为 785kB + ~70kB。它可能会更小，特别是 polyfill，但我现在认为它不错。

JSPM 显然从设置中被踢出。我认为 Angular 在大小方面与 JSPM 配合得不太好，因为它捆绑了许多不必要的文件。

【讨论】：