Lazy load onnx and canvas2html module

frontend/javascripts/dashboard/advanced_dataset/create_explorative_modal.tsx

@@ -262,7 +262,7 @@ function CreateExplorativeModal({ datasetId, onClose }: Props) {
   return (
     <Modal
       title={`Create New Annotation for Dataset “${datasetId.name}”`}
-      visible
+      open
       width={500}
       footer={null}
       onCancel={onClose}

frontend/javascripts/oxalis/model/sagas/quick_select_ml_saga.ts

@@ -1,5 +1,4 @@
 import _ from "lodash";
-import * as ort from "onnxruntime-web";
 import { OrthoView, Vector2, Vector3 } from "oxalis/constants";
 import type { Saga } from "oxalis/model/sagas/effect-generators";
 import { call } from "typed-redux-saga";
@@ -17,7 +16,7 @@ import { map3 } from "libs/utils";
 import { APIDataset } from "types/api_flow_types";
 import { getSamEmbedding, sendAnalyticsEvent } from "admin/admin_rest_api";
 import Dimensions from "../dimensions";
-import { InferenceSession } from "onnxruntime-web";
+import type { InferenceSession } from "onnxruntime-web";
 import { finalizeQuickSelect, prepareQuickSelect } from "./quick_select_heuristic_saga";
 
 const EMBEDDING_SIZE = [1024, 1024, 0] as Vector3;
@@ -100,6 +99,7 @@ function getEmbedding(
 let session: Promise<InferenceSession> | null;
 
 export async function getInferenceSession() {
+  const ort = await import("onnxruntime-web");
   if (session == null) {
     session = ort.InferenceSession.create("/assets/models/vit_l_0b3195_decoder_quantized.onnx");
   }
@@ -115,6 +115,7 @@ async function inferFromEmbedding(
   const [firstDim, secondDim, _thirdDim] = Dimensions.getIndices(activeViewport);
   const topLeft = V3.sub(userBoxInTargetMag.min, embeddingBoxInTargetMag.min);
   const bottomRight = V3.sub(userBoxInTargetMag.max, embeddingBoxInTargetMag.min);
+  const ort = await import("onnxruntime-web");
 
   let ortSession;
   try {

frontend/javascripts/oxalis/view/rendering_utils.ts

@@ -12,7 +12,6 @@ import { getInputCatcherRect } from "oxalis/model/accessors/view_mode_accessor";
 import getSceneController from "oxalis/controller/scene_controller_provider";
 import { getFlooredPosition } from "oxalis/model/accessors/flycam_accessor";
 import { convertBufferToImage } from "libs/utils";
-import html2canvas from "html2canvas";
 
 const getBackgroundColor = (): number =>
   Store.getState().uiInformation.theme === "dark" ? 0x000000 : 0xffffff;
@@ -139,14 +138,16 @@ export async function downloadScreenshot() {
         : null;
     const canvas =
       inputCatcherElement != null
-        ? await html2canvas(inputCatcherElement as HTMLElement, {
-            backgroundColor: null,
-            // Since the viewports do not honor devicePixelRation yet, always use a scale of 1
-            // as otherwise the two images would not fit together on a HiDPI screen.
-            // Can be removed once https://github.com/scalableminds/webknossos/issues/5116 is fixed.
-            scale: 1,
-            ignoreElements: (element) => element.id === "TDViewControls",
-          })
+        ? await import("html2canvas").then((html2canvas) =>
+            html2canvas.default(inputCatcherElement as HTMLElement, {
+              backgroundColor: null,
+              // Since the viewports do not honor devicePixelRation yet, always use a scale of 1
+              // as otherwise the two images would not fit together on a HiDPI screen.
+              // Can be removed once https://github.com/scalableminds/webknossos/issues/5116 is fixed.
+              scale: 1,
+              ignoreElements: (element) => element.id === "TDViewControls",
+            }),
+          )
         : null;
 
     // eslint-disable-next-line no-await-in-loop

webpack.config.js

@@ -170,6 +170,18 @@ module.exports = function (env = {}) {
         chunks: "all",
         // Use a consistent name for the vendors chunk
         name: "vendors~main",
+        cacheGroups: {
+          onnx: {
+            test: /[\\/]node_modules[\\/](onnx.*)[\\/]/,
+            chunks: "all",
+            name: "vendors~onnx",
+          },
+          html2canvas: {
+            test: /[\\/]node_modules[\\/](html2canvas)[\\/]/,
+            chunks: "all",
+            name: "vendors~html2canvas",
+          },
+        },
       },
     },
     // See https://webpack.js.org/configuration/devtool/