在 systemjs 中捆绑是否有意义

Question

我已经用 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 的文件似乎太大了，例如运行我在带宽有限的移动浏览器上的网络应用程序。特别是因为这是一个几乎没有我的代码的包（只有一个 bootstrap 文件和一个主要的应用程序组件）。对于相当大的企业应用程序，我的 Angular 1.5 应用程序包通常约为 700kB。

通过查看捆绑包本身，我发现捆绑了 540 个文件。我很确定我不需要其中的大部分。

完整 config.js 可在此处找到：https://plnkr.co/edit/BhYy5Pu1QbmYJ7Ph5rBO。

最后我的问题是：

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

Answer 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');
});

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

JSPM 显然已从设置中被踢出。我认为 angular 在大小方面不太适合 JSPM，因为它捆绑了很多不必要的文件。

在 systemjs 中捆绑是否有意义

Does bundling in systemjs make sense

gulp

systemjs

jspm

angular