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?

You should think about whether your application will use *everything* most of the time (which would make bundling cheaper), or if it’s mostly just a partial use of all your sources (in which case lazy loading can be cheaper). You could even go crazy and create multiple bundles and then configure systemjs to load those bundles lazily for specific modules. — poke, May 17 '16 at 11:58
Well, this is where it get's tricky. The only stuff I've added to systemjs config is angular core, http, router, plaftorm-browser-dynamic, ng2-translate, rxjs, zone.js and reflect-metadata. All this is essential to start-up the application. However, I don't really know which parts of those packages I need (which JS files) and bundle seems to collect every file there is. You can see the full list in the plunker. — Miroslav Jonas, May 17 '16 at 12:03
It seems that angular 2 is still working on that: https://github.com/angular/angular/issues/7793#issuecomment-202653154 — Tomer Almog, Jun 08 '16 at 19:54

score 1 · Accepted Answer · answered Jul 04 '16 at 12:03

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.

Does bundling in systemjs make sense

1 Answers1