Dynamically import dependencies that are not critical to viewing the UI (#2001)

Author: Gold856

photon-client/src/components/app/photon-3d-visualizer.vue

@@ -1,21 +1,24 @@
 <script setup lang="ts">
 import type { PhotonTarget } from "@/types/PhotonTrackingTypes";
+// @ts-expect-error Intellisense says these conflict with the dynamic imports below
+import type { Mesh, Object3D, PerspectiveCamera, Scene, WebGLRenderer } from "three";
+// @ts-expect-error Intellisense says these conflict with the dynamic imports below
+import type { TrackballControls } from "three/examples/jsm/controls/TrackballControls";
 import { onBeforeUnmount, onMounted, watchEffect } from "vue";
-import {
+const {
   ArrowHelper,
   BoxGeometry,
   Color,
   ConeGeometry,
   Mesh,
   MeshNormalMaterial,
-  type Object3D,
   PerspectiveCamera,
   Quaternion,
-  Scene,
   Vector3,
+  Scene,
   WebGLRenderer
-} from "three";
-import { TrackballControls } from "three/examples/jsm/controls/TrackballControls";
+} = await import("three");
+const { TrackballControls } = await import("three/examples/jsm/controls/TrackballControls");
 
 const props = defineProps<{
   targets: PhotonTarget[];
@@ -114,7 +117,7 @@ const resetCamThirdPerson = () => {
   }
 };
 
-onMounted(() => {
+onMounted(async () => {
   scene = new Scene();
   camera = new PerspectiveCamera(75, 800 / 800, 0.1, 1000);
 

photon-client/src/components/cameras/CameraCalibrationCard.vue

@@ -2,8 +2,6 @@
 import { computed, ref } from "vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { CalibrationBoardTypes, CalibrationTagFamilies, type VideoFormat } from "@/types/SettingTypes";
-import JsPDF from "jspdf";
-import { font as PromptRegular } from "@/assets/fonts/PromptRegular";
 import MonoLogo from "@/assets/images/logoMono.png";
 import CharucoImage from "@/assets/images/ChArUco_Marker8x8.png";
 import PvSlider from "@/components/common/pv-slider.vue";
@@ -15,6 +13,8 @@ import { WebsocketPipelineType } from "@/types/WebsocketDataTypes";
 import { getResolutionString, resolutionsAreEqual } from "@/lib/PhotonUtils";
 import CameraCalibrationInfoCard from "@/components/cameras/CameraCalibrationInfoCard.vue";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
+const PromptRegular = import("@/assets/fonts/PromptRegular");
+const jspdf = import("jspdf");
 
 const settingsValid = ref(true);
 
@@ -88,10 +88,12 @@ const tooManyPoints = computed(
   () => useStateStore().calibrationData.imageCount * patternWidth.value * patternHeight.value > 700000
 );
 
-const downloadCalibBoard = () => {
-  const doc = new JsPDF({ unit: "in", format: "letter" });
+const downloadCalibBoard = async () => {
+  const { jsPDF } = await jspdf;
+  const { font } = await PromptRegular;
+  const doc = new jsPDF({ unit: "in", format: "letter" });
 
-  doc.addFileToVFS("Prompt-Regular.tff", PromptRegular);
+  doc.addFileToVFS("Prompt-Regular.tff", font);
   doc.addFont("Prompt-Regular.tff", "Prompt-Regular", "normal");
   doc.setFont("Prompt-Regular");
   doc.setFontSize(12);

photon-client/src/components/dashboard/tabs/Map3DTab.vue

@@ -16,7 +16,12 @@ const trackedTargets = computed<PhotonTarget[]>(() => useStateStore().currentPip
     </v-row>
     <v-row style="width: 100%">
       <v-col style="display: flex; align-items: center; justify-content: center">
-        <photon3d-visualizer :targets="trackedTargets" />
+        <Suspense>
+          <!-- Allows us to import three js when it's actually needed  -->
+          <photon3d-visualizer :targets="trackedTargets" />
+
+          <template #fallback> Loading... </template>
+        </Suspense>
       </v-col>
     </v-row>
   </div>

photon-client/src/components/settings/ApriltagControlCard.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
-import { Euler, Quaternion as ThreeQuat } from "three";
 import type { Quaternion } from "@/types/PhotonTrackingTypes";
 import { toDeg } from "@/lib/MathUtils";
+const { Euler, Quaternion: ThreeQuat } = await import("three");
 
 const quaternionToEuler = (rot_quat: Quaternion): { x: number; y: number; z: number } => {
   const quat = new ThreeQuat(rot_quat.X, rot_quat.Y, rot_quat.Z, rot_quat.W);

photon-client/src/plugins/vuetify.ts

@@ -1,5 +1,5 @@
 import "vuetify/styles";
-import "@mdi/font/css/materialdesignicons.css";
+import("@mdi/font/css/materialdesignicons.css");
 import type { ThemeDefinition } from "vuetify/lib/composables/theme";
 import { createVuetify } from "vuetify";
 

photon-client/src/views/GeneralSettingsView.vue

@@ -15,6 +15,11 @@ import ApriltagControlCard from "@/components/settings/ApriltagControlCard.vue";
     <NetworkingCard />
     <ObjectDetectionCard v-if="useSettingsStore().general.supportedBackends.length > 0" />
     <LightingControlCard v-if="useSettingsStore().lighting.supported" />
-    <ApriltagControlCard />
+    <Suspense>
+      <!-- Allows us to import three js when it's actually needed  -->
+      <ApriltagControlCard />
+
+      <template #fallback> Loading... </template>
+    </Suspense>
   </div>
 </template>