diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js index 05c7e901753..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"; @@ -99,6 +98,21 @@ 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...
', + }, + error: { + template: '
Failed to load Tool Editor
', + }, + delay: 200, + timeout: 10000, +}); + // patches $router.push() to trigger an event and hide duplication warnings patchRouterPush(VueRouter); diff --git a/client/webpack.config.js b/client/webpack.config.js index 7156fe84f28..82022378579 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,