Performance Problems using System.js
Asked Answered
P

2

17

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: enter image description here

Puny answered 16/9, 2015 at 20:49 Comment(6)
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.Upmost
@Upmost 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).Puny
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.Upmost
@Upmost 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?Puny
Do you mean 26.000ms, or 26,000ms?Horacehoracio
@torazaburo Just fixed, but the later. 26 seconds.Puny
H
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.

Halfblood answered 23/9, 2015 at 5:59 Comment(4)
26,000ms aka 26 seconds. My mistake confusing the English number separators.Puny
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.Halfblood
That only took a few ms to load. I added the screenshot to the post though.Puny
Then I don't see a reason it executes with the delay of 26 secondsHalfblood
L
1

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.

Latvina answered 30/7, 2017 at 19:9 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.