Performance Problems using System.js

Question

I'm playing around with system.js (inspired by angular2 using it for their tutorials), but I get ridiculously bad performance even for the most trivial sample.

For example the following code has a delay of 26000ms(!) between the second (the one before System.import) and last (in app.js) console.log while running locally (so no network delay)

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>System.js Sample</title>
    <script>console.log("1: " + new Date().getTime());</script>
    <script src="bower_components/system.js/dist/system.js"></script>
</head>
<body>
<script>
    console.log('2: ' + new Date().getTime());
    System.import('app.js');
</script>
</body>
</html>

App.js:

console.log('3: ' + new Date().getTime());

I installed the newest system.js version via bower ("system.js": "~0.18.17") and removed all the remaining code it's really just the System.import call that takes ages. So what am I doing wrong?

Picture of the Network tab when loading the page under Chrome:

I remember there being some kind of bug in System.js that made it very laggy if using the System style modules, but OK if using AMD. If you're using the System style modules, try switching to AMD and see if it performs any better. — Ixonal, Sep 18 '15 at 20:04
@Ixonal Considering that I'm just switching from the true and tested method of "concatenate all scripts into one, minimize and then include as a script tag" I might need a bit more information :) Also since the Angular tutorial uses System.js I'd like to stick with it (or does that just mean a different syntax but same library? Yeah I'm a bit confused). — Voo, Sep 18 '15 at 20:16
I'm assuming you're using TypeScript? You can set what system it uses for modules in your tsconfig.json file. Just set module to "amd". System can recognize CommonJS, AMD, ES6, and System style imports, so it doesn't matter if you have it transpile to AMD. — Ixonal, Sep 18 '15 at 20:39
@Ixonal While my real goal is to use typescript, what would be the difference what module system I transpile my typescript code when I don't even declare any modules, but just load the simple file? — Voo, Sep 18 '15 at 21:42

score 1 · Answer 1 · answered Sep 23 '15 at 05:59

1

Having in mind that system.js loads scripts asynchronously, 26ms is a normal load speed of your script. Your local server needs some time to process the request/response job and causes some delay for this.

answered Sep 23 '15 at 05:59

Eugene Tiurin

4,019
4
33
32

26,000ms aka 26 seconds. My mistake confusing the English number separators. – Voo Sep 23 '15 at 06:04
Ok, then this is not normal:) I doubt system.js causing this delay. Try to check the developer console (F12 in your browser) -> 'Network' tab. There should be timeline of all you loaded resources. Check the loading time of your app.js script. – Eugene Tiurin Sep 23 '15 at 06:18
That only took a few ms to load. I added the screenshot to the post though. – Voo Sep 23 '15 at 18:23
Then I don't see a reason it executes with the delay of 26 seconds – Eugene Tiurin Sep 23 '15 at 19:50

score 1 · Answer 2 · answered Jul 30 '17 at 19:09

The initial Angular2 quickstart repo would load RxJS files individually which took too long. You would often find 300+ requests being made. Since then they have fixed this and you can further reduce requests made by being specific when you import RxJS modules. Angular quickstart repo is much quicker these days.

Performance Problems using System.js

2 Answers2