diff --git a/src/composables/sidebarTabs/useAssetsSidebarTab.ts b/src/composables/sidebarTabs/useAssetsSidebarTab.ts
index cd8e8d0bb..0995a75a0 100644
--- a/src/composables/sidebarTabs/useAssetsSidebarTab.ts
+++ b/src/composables/sidebarTabs/useAssetsSidebarTab.ts
@@ -1,9 +1,12 @@
-import { markRaw } from 'vue'
+import { defineAsyncComponent } from 'vue'
 
-import AssetsSidebarTab from '@/components/sidebar/tabs/AssetsSidebarTab.vue'
 import { useQueueStore } from '@/stores/queueStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
+const AssetsSidebarTab = defineAsyncComponent(
+  () => import('@/components/sidebar/tabs/AssetsSidebarTab.vue')
+)
+
 export const useAssetsSidebarTab = (): SidebarTabExtension => {
   return {
     id: 'assets',
@@ -11,7 +14,7 @@ export const useAssetsSidebarTab = (): SidebarTabExtension => {
     title: 'sideToolbar.assets',
     tooltip: 'sideToolbar.assets',
     label: 'sideToolbar.labels.assets',
-    component: markRaw(AssetsSidebarTab),
+    component: AssetsSidebarTab,
     type: 'vue',
     iconBadge: () => {
       const queueStore = useQueueStore()
diff --git a/src/composables/sidebarTabs/useModelLibrarySidebarTab.ts b/src/composables/sidebarTabs/useModelLibrarySidebarTab.ts
index 269955648..a083cace5 100644
--- a/src/composables/sidebarTabs/useModelLibrarySidebarTab.ts
+++ b/src/composables/sidebarTabs/useModelLibrarySidebarTab.ts
@@ -1,10 +1,13 @@
-import { markRaw } from 'vue'
+import { defineAsyncComponent } from 'vue'
 
-import ModelLibrarySidebarTab from '@/components/sidebar/tabs/ModelLibrarySidebarTab.vue'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 import { isElectron } from '@/utils/envUtil'
 
+const ModelLibrarySidebarTab = defineAsyncComponent(
+  () => import('@/components/sidebar/tabs/ModelLibrarySidebarTab.vue')
+)
+
 export const useModelLibrarySidebarTab = (): SidebarTabExtension => {
   return {
     id: 'model-library',
@@ -12,7 +15,7 @@ export const useModelLibrarySidebarTab = (): SidebarTabExtension => {
     title: 'sideToolbar.modelLibrary',
     tooltip: 'sideToolbar.modelLibrary',
     label: 'sideToolbar.labels.models',
-    component: markRaw(ModelLibrarySidebarTab),
+    component: ModelLibrarySidebarTab,
     type: 'vue',
     iconBadge: () => {
       if (isElectron()) {
diff --git a/src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts b/src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts
index 7b9d6b3b0..5bdc6e0c2 100644
--- a/src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts
+++ b/src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts
@@ -1,8 +1,11 @@
-import { markRaw } from 'vue'
+import { defineAsyncComponent } from 'vue'
 
-import NodeLibrarySidebarTab from '@/components/sidebar/tabs/NodeLibrarySidebarTab.vue'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
+const NodeLibrarySidebarTab = defineAsyncComponent(
+  () => import('@/components/sidebar/tabs/NodeLibrarySidebarTab.vue')
+)
+
 export const useNodeLibrarySidebarTab = (): SidebarTabExtension => {
   return {
     id: 'node-library',
@@ -10,7 +13,7 @@ export const useNodeLibrarySidebarTab = (): SidebarTabExtension => {
     title: 'sideToolbar.nodeLibrary',
     tooltip: 'sideToolbar.nodeLibrary',
     label: 'sideToolbar.labels.nodes',
-    component: markRaw(NodeLibrarySidebarTab),
+    component: NodeLibrarySidebarTab,
     type: 'vue'
   }
 }
diff --git a/src/platform/workflow/management/composables/useWorkflowsSidebarTab.ts b/src/platform/workflow/management/composables/useWorkflowsSidebarTab.ts
index 544570f22..2d7bdae31 100644
--- a/src/platform/workflow/management/composables/useWorkflowsSidebarTab.ts
+++ b/src/platform/workflow/management/composables/useWorkflowsSidebarTab.ts
@@ -1,10 +1,13 @@
-import { markRaw } from 'vue'
+import { defineAsyncComponent } from 'vue'
 
-import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
+const WorkflowsSidebarTab = defineAsyncComponent(
+  () => import('@/components/sidebar/tabs/WorkflowsSidebarTab.vue')
+)
+
 export const useWorkflowsSidebarTab = (): SidebarTabExtension => {
   const settingStore = useSettingStore()
   const workflowStore = useWorkflowStore()
@@ -23,7 +26,7 @@ export const useWorkflowsSidebarTab = (): SidebarTabExtension => {
     title: 'sideToolbar.workflows',
     tooltip: 'sideToolbar.workflows',
     label: 'sideToolbar.labels.workflows',
-    component: markRaw(WorkflowsSidebarTab),
+    component: WorkflowsSidebarTab,
     type: 'vue'
   }
 }