From e897dd8effb6c39217b06aa451f8ea0a6bcffd8d Mon Sep 17 00:00:00 2001
From: Christopher Serr <christopher.serr@gmail.com>
Date: Wed, 19 Jun 2024 20:14:38 +0200
Subject: [PATCH] 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       | 10 +---------
 src/indexDelayed.ts | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+), 9 deletions(-)
 create mode 100644 src/indexDelayed.ts

diff --git a/src/index.tsx b/src/index.tsx
index 7000deb..7ed3570 100644
--- a/src/index.tsx
+++ b/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 {
diff --git a/src/indexDelayed.ts b/src/indexDelayed.ts
new file mode 100644
index 0000000..cdacee1
--- /dev/null
+++ b/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 };