Menu
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:
332
SystemJS is a hookable, standards-based module loader. It provides a workflow where code written for production workflows of native ES modules in browsers (like Rollup code-splitting builds), can be transpiled to the System.
SystemJS is a dynamic ECMAScript (ES) module loader that is used by Angular Quickstart and other projects. The Angular Quickstart seed project has been deprecated.
A system import map is used by the system to find the partner relationship for a document (flat file definition), to determine which import map is used to translate the data. The system import map builds the key that the translator uses to find the partner relationship.
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.
165
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.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
