Request only a single JS bundle from index.ts (#931)

We introduce a new `indexDelayed.ts` file that bundles all the imports
that are used in the `index.ts` file. They are not imported directly
there, because we want to keep the size of the `index.html` as small as
possible, so it can focus on requesting the WASM file as soon as
possible. This should result in the `indexDelayed.ts` bundle containing
basically all the JS. This JS bundle and the WASM file should then be
requested in parallel. While it would be possible to request these all
individually over in the `index.ts`, browsers don't actually like doing
too many requests in parallel and it turns out that big JavaScript files
actually compress better than having many small ones. The WASM file also
is pretty big, so ideally we are not bottlenecked by the large JS file.
If necessary, we could do some more bundle splitting for stuff that
isn't used until much later, like the Markdown library.

src/index.tsx

@@ -26,15 +26,7 @@ import "./css/main.scss";
 import("./css/font-awesome.css");
 
 try {
-    const [
-        { LiveSplit },
-        React,
-        { createRoot },
-    ] = await Promise.all([
-        import("./ui/LiveSplit"),
-        import("react"),
-        import("react-dom/client"),
-    ]);
+    const { LiveSplit, React, createRoot } = await import("./indexDelayed");
 
     try {
         const {

src/indexDelayed.ts

@@ -0,0 +1,20 @@
+// This bundles all the imports that are used in the `index.ts` file. They are
+// not imported directly there, because we want to keep the size of the
+// `index.html` as small as possible, so it can focus on requesting the WASM
+// file as soon as possible. This should result in the `indexDelayed.ts` bundle
+// containing basically all the JS. This JS bundle and the WASM file should then
+// be requested in parallel. While it would be possible to request these all
+// individually over in the `index.ts`, browsers don't actually like doing too
+// many requests in parallel and it turns out that big JavaScript files actually
+// compress better than having many small ones. The WASM file also is pretty
+// big, so ideally we are not bottlenecked by the large JS file. If necessary,
+// we could do some more bundle splitting for stuff that isn't used until much
+// later, like the Markdown library.
+
+// FIXME: Look into pulling even more CSS out of the index.ts as well.
+
+import { LiveSplit } from "./ui/LiveSplit";
+import React from "react";
+import { createRoot } from "react-dom/client";
+
+export { LiveSplit, React, createRoot };