Long load using ES6 modules in Chrome

Question

My javascript app is for a kiosk and is only targeting the Chrome browser. I'm using Chrome version 65. I am trying to use ES6 modules without using a transpiler like Babel. My code was originally:

in index.html:

<script src="js/index.js"></script>

index.js:

import Main from './classes/Main.js';

const init = () => {
  const app = new Main();
};

init();

Main.js:

export default class Main {
  constructor() {
  }
}

Originally I got the error "Uncaught SyntaxError: Unexpected identifier" from index.js line 1. Then based on ES6 module Import giving "Uncaught SyntaxError: Unexpected identifier" I added 'type="module"' to the html tag:

<script type="module" src="js/index.js"></script>

This did load, but it takes my browser about 15 seconds to load index.js and main.js according to the network profiler. What could be going on?

score 1 · Answer 1 · answered Apr 04 '18 at 18:39

So I ran some tests on my local box. I have a simple NodeJs server running with the following three files:

index.html

<!doctype html>
<html>
<head>
  <title>es6 Module test</title>
  <script>
  console.time('load module');
  console.time('time until constructor called');
  </script>
  <script type="module" src="module.js"></script>
  <script>
  console.timeEnd('load module');
  </script>
</head>
<body>
  See console output.
</body>
</html>

module.js

import Main from './Main.js';

const init = () => {
  const app = new Main();
};

init();

and

Main.js

export default class Main {
  constructor() {
    console.timeEnd('time until constructor called');
  }
}

Running this code in Chrome 65 (On a Mac)

I get the following output:

Run 1

load module: 0.141845703125ms
time until constructor called: 7.90087890625ms

Run 2

load module: 0.139892578125ms
time until constructor called: 6.5498046875ms

Run 3

load module: 0.160888671875ms
time until constructor called: 7.14404296875ms

Run 4

load module: 0.297119140625ms
time until constructor called: 7.4228515625ms

My download times ranged between 2ms and 10ms for each of the three files.

I really can't tell why your times are so much slower. But they should not be. Maybe your server is getting hammered and unable to respond fast enough?

Possible things to check:

What happens if you try to download each of the files from the address bar? Do they still take forever to download?

What about on a different server?

These are good suggestions. I'll give them a try and report back. — interwebjill, Apr 06 '18 at 16:00

score 1 · Answer 2 · answered Nov 08 '18 at 23:38

1

I was was having the same problem when serving my files using:

python -m SimpleHTTPServer

After changing to use python3 http.server instead it fixed the problem:

python3 -m http.server

answered Nov 08 '18 at 23:38

spencer.sm

19,173
10
77
88

Great! weird error though. I switched to serve with npx and all works fine – eltuza Nov 20 '18 at 19:26
This did not resolve the issue for me. In fact it made it worse (running via WSL on Windows 10) by spreading it to HTML files. :\ – Josh Nov 28 '18 at 03:37

Long load using ES6 modules in Chrome

2 Answers2