cubing.js
cubing.js copied to clipboard
Reduce the `<twisty-player>` waterfall to three round trips for the default config (3x3x3 in 3D)
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:
This takes ≈12 seconds and has four round-trips:
-
cubing/twisty
- Static imports of
cubing/twisty
-
3d-dynamic-inside-[hashes].js
- 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
.
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.