Question

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

使用的命令是开发模式：

public class Usuario {
    @SerializedName("id")
    public String id;

    // the following will cause infinite loop of GC
    public TextView problemView;

    // use transient keyword will solve the problem in GC infinite loop
    private transient TextView okView;
}

或生产：

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

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

通过查看bundle本身，我意识到捆绑了540个文件。我很确定我不需要大部分内容。

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

最后我的问题是：

在项目中使用systemJS时是否应捆绑文件，还是应该将它们分开，让systemJS负责延迟加载？
如果建议捆绑，我如何创建一个合理大小的捆绑包，并且只包含我的应用实际依赖的文件？

Answer 1

使用最新的演示和RC3我已经改变了系统.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上创建一个bundle之后我就像这样加载它：

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

角度polyfill的大小为785kB + ~70kB（es6-shim，反映元数据和zone.js）。它可能更小，特别是polyfill，但我现在称它为体面。

JSPM显然已从设置中被踢出。我认为角度与JSPM的关系不大，因为它捆绑了大量不必要的文件。

捆绑在systemjs中是否有意义

1 个答案: