Does bundling in systemjs make sense

Question

I have set up a seed project with Angular 2 (RC.1) and system JS. I wanted to create a static single bundle for production and bundle everything except for my own code for development. This was my normal flow in past, before using systemjs. After bundling with gulp-jspm/systemjs-builder the bundle file was bigger than 2 MB (source) or 1.2 MB (minified). As this looked too big I've double checked using plain jspm CLI, but the file size was the same.

Command used was for dev mode:

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

Or for production:

jspm bundle app/bootstrap mybundlename.js

Having a 1.2 MB file on production seems too big if I want e.g. to run my web app on mobile browsers with limited bandwidth. Specially since this was was a bundle with almost no code of mine (just a bootstrap file and a main app-component). My Angular 1.5 app bundles were usually around 700kB for pretty big enterprise applications.

By looking at bundle itself I realized there are 540 files bundled. I'm pretty sure I don't need most of them.

Full config.js can be found here: https://plnkr.co/edit/BhYy5Pu1QbmYJ7Ph5rBO.

So finally my questions:

• Should files be bundled when using systemJS in a project or should I just leave them unbundled and let systemJS take care of lazy loading?
• If bundling is recommended how can I create a bundle that has sensible size and includes only the files my app actually depends on?

Answer 1

With latest demos and RC3 I've changed the system.JS flow and now the size of the bundle is considerably smaller. Still RxJS brings too much into the story and hopefully it will be optimized in the future.

This is what I have now:

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

And after creating a bundle on DEV I load it like this:

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

The size is 785kB + ~70kB for angular polyfill (es6-shim, reflect metadata and zone.js). It could be smaller still, specially polyfill but I would call it decent now.

• JSPM was kicked out obviously from the setup. I think angular doesn't play too well with JSPM when it comes to size as it bundles lot of unnecessary files.