cubing.js icon indicating copy to clipboard operation
cubing.js copied to clipboard

Reduce the `<twisty-player>` waterfall to three round trips for the default config (3x3x3 in 3D)

Open lgarron opened this issue 3 years ago • 1 comments

Consider the following:

<script src="https://cdn.cubing.net/js/cubing/twisty" type="module"></script>
<twisty-player></twisty-player>

Now visit this with cache disabled and the network set to emulate "Slow 3G" in Chrome DevTools: Screen Shot 2022-01-23 at 14 52 26

This takes ≈12 seconds and has four round-trips:

  1. cubing/twisty
  2. Static imports of cubing/twisty
  3. 3d-dynamic-inside-[hashes].js
  4. The chunk with most of the three code (chunk-QBF6CLRB.js in the screenshot).

I want to avoid loading the 3D code unless it's needed, so three of these round-trips are unavoidable. But we can shave about 2 seconds off the load if we can get 3. and 4. to happen in parallel.

We could also consider downloading the three code proactively, but it's pretty large and I don't want it to step on the static import downloads — which need to load as soon as possible to display a UI to the user.

I tried some simple ways to do this, but I haven't figured out a way that is preserved by esbuild.

lgarron avatar Jan 23 '22 22:01 lgarron

Some day I'd also like to see about optimizing the first two steps into one for showing a UI as quickly as possible, but that's a separate issue.

lgarron avatar Jan 23 '22 22:01 lgarron