angular - 在 systemjs 中捆绑是否有意义

Question

我已经使用 Angular 2 (RC.1) 和系统 JS 建立了一个种子项目。我想为生产创建一个静态的单一 bundle ，并捆绑除我自己的开发代码之外的所有内容。在使用 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。

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

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

最后我的问题是:

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

Answer 1

在最新的演示和 RC3 中，我已经更改了 system.JS 流程，现在 bundle 的大小要小得多。仍然 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(es6-shim，反射(reflect)元数据和 zone.js)的大小为 785kB + ~70kB。它可能会更小，特别是 polyfill，但我现在认为它还不错。

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