lazy load lesser used scene objects

src/components/SettingsProvider.tsx

@@ -8,9 +8,32 @@ import {
   useState,
 } from "react";
 
-const SettingsContext = createContext(null);
-const DebugContext = createContext(null);
-const ControlsContext = createContext(null);
+type StateSetter<T> = ReturnType<typeof useState<T>>[1];
+
+type SettingsContext = {
+  fogEnabled: boolean;
+  setFogEnabled: StateSetter<boolean>;
+  fov: number;
+  setFov: StateSetter<number>;
+  audioEnabled: boolean;
+  setAudioEnabled: StateSetter<boolean>;
+  animationEnabled: boolean;
+  setAnimationEnabled: StateSetter<boolean>;
+};
+
+type DebugContext = {
+  debugMode: boolean;
+  setDebugMode: StateSetter<boolean>;
+};
+
+type ControlsContext = {
+  speedMultiplier: number;
+  setSpeedMultiplier: StateSetter<number>;
+};
+
+const SettingsContext = createContext<SettingsContext | null>(null);
+const DebugContext = createContext<DebugContext | null>(null);
+const ControlsContext = createContext<ControlsContext | null>(null);
 
 type PersistedSettings = {
   fogEnabled?: boolean;
@@ -41,7 +64,7 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
   const [animationEnabled, setAnimationEnabled] = useState(true);
   const [debugMode, setDebugMode] = useState(false);
 
-  const settingsContext = useMemo(
+  const settingsContext: SettingsContext = useMemo(
     () => ({
       fogEnabled,
       setFogEnabled,
@@ -55,12 +78,12 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
     [fogEnabled, speedMultiplier, fov, audioEnabled, animationEnabled],
   );
 
-  const debugContext = useMemo(
+  const debugContext: DebugContext = useMemo(
     () => ({ debugMode, setDebugMode }),
     [debugMode, setDebugMode],
   );
 
-  const controlsContext = useMemo(
+  const controlsContext: ControlsContext = useMemo(
     () => ({ speedMultiplier, setSpeedMultiplier }),
     [speedMultiplier, setSpeedMultiplier],
   );

src/components/renderObject.tsx

@@ -1,6 +1,6 @@
+import { lazy } from "react";
 import type { TorqueObject } from "../torqueScript";
 import { TerrainBlock } from "./TerrainBlock";
-import { WaterBlock } from "./WaterBlock";
 import { SimGroup } from "./SimGroup";
 import { InteriorInstance } from "./InteriorInstance";
 import { Sky } from "./Sky";
@@ -9,13 +9,31 @@ import { TSStatic } from "./TSStatic";
 import { StaticShape } from "./StaticShape";
 import { Item } from "./Item";
 import { Turret } from "./Turret";
-import { AudioEmitter } from "./AudioEmitter";
 import { WayPoint } from "./WayPoint";
 import { Camera } from "./Camera";
-import { ForceFieldBare } from "./ForceFieldBare";
+import { useSettings } from "./SettingsProvider";
+
+const AudioEmitter = lazy(() =>
+  import("./AudioEmitter").then((mod) => ({ default: mod.AudioEmitter })),
+);
+
+function ConditionalAudioEmitter(props) {
+  const { audioEnabled } = useSettings();
+  return audioEnabled ? <AudioEmitter {...props} /> : null;
+}
+
+// Not every map will have force fields.
+const ForceFieldBare = lazy(() =>
+  import("./ForceFieldBare").then((mod) => ({ default: mod.ForceFieldBare })),
+);
+
+// Not every map will have force fields.
+const WaterBlock = lazy(() =>
+  import("./WaterBlock").then((mod) => ({ default: mod.WaterBlock })),
+);
 
 const componentMap = {
-  AudioEmitter,
+  AudioEmitter: ConditionalAudioEmitter,
   Camera,
   ForceFieldBare,
   InteriorInstance,