Improving ES6 workers loading time

CesiumJS
1

Hi,

Loading all the workers takes a lot of time and delays the first rendering of the globe.

What I see:

  • there are many small workers;

  • these workers depends on several other files which encurs roundtrips;

  • the same workers are loaded several times.

This can be reproduced using the sandcastle:

network.png
network.png815×548 183 KB

Are you aware of it and do you have some suggestions about how to improve the situation?

Maybe it would be worth trying:

1- to combine each worker dependencies so that there is only 1 file to load per worker;

2- to combine all workers together (and there dependencies) into a single bundle.

For 1, I have looked into the gulp file but could not figure out where the rollup configuration asks for unbundled dependencies.

Do you have some guidances?

Let me know what you think about it.

Cheers,

Guillaume

1 Like
2

I am having the exact same issue. Each of the workers is downloaded sequentially, one by one, so the first render of the globe through the Internet gets delayed by 5 seconds at least. I am using the Cesium standard distribution (minified).

Is there a way to improve loading performance or to combine the modules somehow?

3

As of CesiumJS 1.63, web worker size has reduced significantly after the ES6 migration, which allows us to re-use shared code between workers. You can read more about that in this blog post: https://cesium.com/blog/2019/10/31/cesiumjs-es6/

I believe the reason we cannot combine all workers together is because in order to launch a web worker you must pass a JavaScript file that can run independently.

4

This distro we put together, C137.js, helps with this issue. Check it out.

5

Since I also ran across this issue, I thought I might add my approach to speeding this up using http cache:

Make a list of the workers that your site is loading, then have the browser prefetch them using link prefetching.

For example:

  const html = [
    'cesiumWorkerBootstrapper.js',
    'transferTypedArrayTest.js',
    'createVerticesFromHeightmap.js' // ... etc
  ].map(
    worker => `<link rel="prefetch" href="/public/Workers/${worker}">`
  ).join('\n');
  document.body.insertAdjacentHTML('beforeend', html);
2 Likes
6

Is there a good solution to this yet? The c137.js seemed like a good way to go.