Use smaller bundles again

Turns out that compiling a large bundle is really slow and apparently
also not parallelized. I thought it might make sense to not split the
bundle to not create any unnecessary requests. But JavaScript is
apparently really slow to compile, so any sort of parallelization we can
get definitely outweighs the slight cost to the additional requests.
This commit is contained in:
Christopher Serr
2021-07-02 19:41:11 +02:00
parent f6901fdd2b
commit 87fcc2dc67
2 changed files with 59 additions and 52 deletions
+59 -1
View File
@@ -3,5 +3,63 @@ if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
}
import "./css/main.scss";
import("./main");
import("./css/font-awesome.css");
const [
{ LiveSplit },
React,
ReactDOM,
{ toast, ToastContainer },
] = await Promise.all([
import("./ui/LiveSplit"),
import("react"),
import("react-dom"),
import("react-toastify"),
]);
try {
const {
splits,
splitsKey,
layout,
hotkeys,
layoutWidth,
} = await LiveSplit.loadStoredData();
try {
ReactDOM.render(
<div>
<LiveSplit
splits={splits}
layout={layout}
hotkeys={hotkeys}
splitsKey={splitsKey}
layoutWidth={layoutWidth}
/>
<ToastContainer
position={toast.POSITION.BOTTOM_RIGHT}
toastClassName="toast-class"
bodyClassName="toast-body"
style={{
textShadow: "none",
}}
/>
</div>,
document.getElementById("base"),
);
} catch (_) {
alert(`Couldn't load LiveSplit One. \
You may be using a browser that is not up to date. \
Please update your browser or your iOS version and try again. \
Another reason might be that a browser extension, such as an adblocker, \
is blocking access to important scripts.`);
}
} catch (e) {
if (e.name === "InvalidStateError") {
alert(`Couldn't load LiveSplit One. \
You may be in private browsing mode. \
LiveSplit One cannot store any splits, layouts, or other settings because of the limitations of the browser's private browsing mode. \
These limitations may be lifted in the future. \
To run LiveSplit One for now, please disable private browsing in your settings.\n`);
}
}
-51
View File
@@ -1,51 +0,0 @@
import { LiveSplit } from "./ui/LiveSplit";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { toast, ToastContainer } from "react-toastify";
try {
const {
splits,
splitsKey,
layout,
hotkeys,
layoutWidth,
} = await LiveSplit.loadStoredData();
try {
ReactDOM.render(
<div>
<LiveSplit
splits={splits}
layout={layout}
hotkeys={hotkeys}
splitsKey={splitsKey}
layoutWidth={layoutWidth}
/>
<ToastContainer
position={toast.POSITION.BOTTOM_RIGHT}
toastClassName="toast-class"
bodyClassName="toast-body"
style={{
textShadow: "none",
}}
/>
</div>,
document.getElementById("base"),
);
} catch (_) {
alert(`Couldn't load LiveSplit One. \
You may be using a browser that is not up to date. \
Please update your browser or your iOS version and try again. \
Another reason might be that a browser extension, such as an adblocker, \
is blocking access to important scripts.`);
}
} catch (e) {
if (e.name === "InvalidStateError") {
alert(`Couldn't load LiveSplit One. \
You may be in private browsing mode. \
LiveSplit One cannot store any splits, layouts, or other settings because of the limitations of the browser's private browsing mode. \
These limitations may be lifted in the future. \
To run LiveSplit One for now, please disable private browsing in your settings.\n`);
}
}