From 674a9fe8efef9d2bd33e5161464e956a6417e22b Mon Sep 17 00:00:00 2001 From: mvdbeek Date: Tue, 3 Jun 2025 12:12:55 +0200 Subject: [PATCH 1/3] Attempt to reduce bundle size However the dynamic import doesn't actually seem to work. --- client/src/entry/analysis/router.js | 5 ++--- client/webpack.config.js | 7 +++++++ 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js index 05c7e901753..96de1a57bba 100644 --- a/client/src/entry/analysis/router.js +++ b/client/src/entry/analysis/router.js @@ -89,7 +89,6 @@ import ManageObjectStoreIndex from "@/components/ObjectStore/Instances/ManageInd import UpgradeObjectStoreInstance from "@/components/ObjectStore/Instances/UpgradeInstance.vue"; import CreateUserObjectStore from "@/components/ObjectStore/Templates/CreateUserObjectStore.vue"; import Sharing from "@/components/Sharing/SharingPage.vue"; -import CustomToolEditor from "@/components/Tool/CustomToolEditor.vue"; import HistoryStorageOverview from "@/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue"; import UserDatasetPermissions from "@/components/User/UserDatasetPermissions.vue"; import WorkflowPublished from "@/components/Workflow/Published/WorkflowPublished.vue"; @@ -458,12 +457,12 @@ export function getRouter(Galaxy) { }, { path: "/tools/editor", - component: CustomToolEditor, + component: () => import("@/components/Tool/CustomToolEditor.vue"), redirect: redirectAnon(), }, { path: "/tools/editor/:toolUuid", - component: CustomToolEditor, + component: () => import("@/components/Tool/CustomToolEditor.vue"), redirect: redirectAnon(), props: true, }, diff --git a/client/webpack.config.js b/client/webpack.config.js index 7156fe84f28..659e1f34958 100644 --- a/client/webpack.config.js +++ b/client/webpack.config.js @@ -30,6 +30,7 @@ const modulesExcludedFromLibs = [ "vega-embed", "vega-lite", "ace-builds", + "schema-to-ts", ].join("|"); const buildDate = new Date(); @@ -102,6 +103,12 @@ module.exports = (env = {}, argv = {}) => { chunks: "all", priority: -10, }, + monaco: { + test: /[\\/]node_modules[\\/]monaco-editor[\\/]/, + name: 'monaco', + chunks: 'all', + enforce: true, + }, }, }, ...minimizations, From 67d86e7685e23830f7695fbcd8efec282ee88bb9 Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Tue, 3 Jun 2025 13:34:38 -0400 Subject: [PATCH 2/3] Use explicit async component wrapper/factory for CustomToolEditor code splitting --- client/src/entry/analysis/router.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js index 96de1a57bba..eb7c388e4f2 100644 --- a/client/src/entry/analysis/router.js +++ b/client/src/entry/analysis/router.js @@ -89,6 +89,7 @@ import ManageObjectStoreIndex from "@/components/ObjectStore/Instances/ManageInd import UpgradeObjectStoreInstance from "@/components/ObjectStore/Instances/UpgradeInstance.vue"; import CreateUserObjectStore from "@/components/ObjectStore/Templates/CreateUserObjectStore.vue"; import Sharing from "@/components/Sharing/SharingPage.vue"; +// import CustomToolEditor from "@/components/Tool/CustomToolEditor.vue"; import HistoryStorageOverview from "@/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue"; import UserDatasetPermissions from "@/components/User/UserDatasetPermissions.vue"; import WorkflowPublished from "@/components/Workflow/Published/WorkflowPublished.vue"; @@ -98,6 +99,19 @@ import WorkflowInvocationState from "@/components/WorkflowInvocationState/Workfl Vue.use(VueRouter); +// Async component for CustomToolEditor to reduce bundle size +const CustomToolEditor = () => ({ + component: import("@/components/Tool/CustomToolEditor.vue"), + loading: { + template: '
Loading Tool Editor...
' + }, + error: { + template: '
Failed to load Tool Editor
' + }, + delay: 200, + timeout: 10000 +}); + // patches $router.push() to trigger an event and hide duplication warnings patchRouterPush(VueRouter); @@ -457,12 +471,12 @@ export function getRouter(Galaxy) { }, { path: "/tools/editor", - component: () => import("@/components/Tool/CustomToolEditor.vue"), + component: CustomToolEditor, redirect: redirectAnon(), }, { path: "/tools/editor/:toolUuid", - component: () => import("@/components/Tool/CustomToolEditor.vue"), + component: CustomToolEditor, redirect: redirectAnon(), props: true, }, From 9b0bc2bfbec81ba84c6e72ee7fe24372c9abdcf7 Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Tue, 3 Jun 2025 13:45:32 -0400 Subject: [PATCH 3/3] Cleanup, formatting, comments. --- client/src/entry/analysis/router.js | 9 +++++---- client/webpack.config.js | 4 ++-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js index eb7c388e4f2..99280467c92 100644 --- a/client/src/entry/analysis/router.js +++ b/client/src/entry/analysis/router.js @@ -89,7 +89,6 @@ import ManageObjectStoreIndex from "@/components/ObjectStore/Instances/ManageInd import UpgradeObjectStoreInstance from "@/components/ObjectStore/Instances/UpgradeInstance.vue"; import CreateUserObjectStore from "@/components/ObjectStore/Templates/CreateUserObjectStore.vue"; import Sharing from "@/components/Sharing/SharingPage.vue"; -// import CustomToolEditor from "@/components/Tool/CustomToolEditor.vue"; import HistoryStorageOverview from "@/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue"; import UserDatasetPermissions from "@/components/User/UserDatasetPermissions.vue"; import WorkflowPublished from "@/components/Workflow/Published/WorkflowPublished.vue"; @@ -100,16 +99,18 @@ import WorkflowInvocationState from "@/components/WorkflowInvocationState/Workfl Vue.use(VueRouter); // Async component for CustomToolEditor to reduce bundle size +// NOTE: We use the full async component factory pattern instead of simple dynamic imports +// (i.e., `() => import("@/components/Tool/CustomToolEditor.vue")`) due to what I think are router limitations. Revisit with vr-4 const CustomToolEditor = () => ({ component: import("@/components/Tool/CustomToolEditor.vue"), loading: { - template: '
Loading Tool Editor...
' + template: '
Loading Tool Editor...
', }, error: { - template: '
Failed to load Tool Editor
' + template: '
Failed to load Tool Editor
', }, delay: 200, - timeout: 10000 + timeout: 10000, }); // patches $router.push() to trigger an event and hide duplication warnings diff --git a/client/webpack.config.js b/client/webpack.config.js index 659e1f34958..82022378579 100644 --- a/client/webpack.config.js +++ b/client/webpack.config.js @@ -105,8 +105,8 @@ module.exports = (env = {}, argv = {}) => { }, monaco: { test: /[\\/]node_modules[\\/]monaco-editor[\\/]/, - name: 'monaco', - chunks: 'all', + name: "monaco", + chunks: "all", enforce: true, }, },