feat: convert components to dynamic imports for improved performance

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import WorkflowApp from '@/app/components/workflow-app'
 
 const Page = () => {

web/app/components/app-sidebar/app-info.tsx

@@ -12,23 +12,17 @@ import {
   RiFileUploadLine,
 } from '@remixicon/react'
 import AppIcon from '../base/app-icon'
-import SwitchAppModal from '../app/switch-app-modal'
 import cn from '@/utils/classnames'
-import Confirm from '@/app/components/base/confirm'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { ToastContext } from '@/app/components/base/toast'
 import AppsContext, { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import { copyApp, deleteApp, exportAppConfig, updateAppInfo } from '@/service/apps'
-import DuplicateAppModal from '@/app/components/app/duplicate-modal'
 import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal'
-import CreateAppModal from '@/app/components/explore/create-app-modal'
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { getRedirection } from '@/utils/app-redirection'
-import UpdateDSLModal from '@/app/components/workflow/update-dsl-modal'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
-import DSLExportConfirmModal from '@/app/components/workflow/dsl-export-confirm-modal'
 import { fetchWorkflowDraft } from '@/service/workflow'
 import ContentDialog from '@/app/components/base/content-dialog'
 import Button from '@/app/components/base/button'
@@ -36,6 +30,26 @@ import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overvie
 import Divider from '../base/divider'
 import type { Operation } from './app-operations'
 import AppOperations from './app-operations'
+import dynamic from 'next/dynamic'
+
+const SwitchAppModal = dynamic(() => import('@/app/components/app/switch-app-modal'), {
+  ssr: false,
+})
+const CreateAppModal = dynamic(() => import('@/app/components/explore/create-app-modal'), {
+  ssr: false,
+})
+const DuplicateAppModal = dynamic(() => import('@/app/components/app/duplicate-modal'), {
+  ssr: false,
+})
+const Confirm = dynamic(() => import('@/app/components/base/confirm'), {
+  ssr: false,
+})
+const UpdateDSLModal = dynamic(() => import('@/app/components/workflow/update-dsl-modal'), {
+  ssr: false,
+})
+const DSLExportConfirmModal = dynamic(() => import('@/app/components/workflow/dsl-export-confirm-modal'), {
+  ssr: false,
+})
 
 export type IAppInfoProps = {
   expand: boolean

web/app/components/app/app-publisher/index.tsx

@@ -118,7 +118,8 @@ const AppPublisher = ({
     }
   }, [appAccessSubjects, appDetail])
   const language = useGetLanguage()
-  const formatTimeFromNow = useCallback(async (time: number) => {
+
+  const formatTimeFromNow = useCallback((time: number) => {
     return dayjs(time).locale(language === 'zh_Hans' ? 'zh-cn' : language.replace('_', '-')).fromNow()
   }, [language])
 
@@ -182,8 +183,7 @@ const AppPublisher = ({
     if (publishDisabled || published)
       return
     handlePublish()
-  },
-    { exactMatch: true, useCapture: true })
+  }, { exactMatch: true, useCapture: true })
 
   return (
     <>

web/app/components/app/app-publisher/suggested-action.tsx

@@ -20,8 +20,8 @@ const SuggestedAction = ({ icon, link, disabled, children, className, onClick, .
       target='_blank'
       rel='noreferrer'
       className={classNames(
-        'flex justify-start items-center gap-2 py-2 px-2.5 bg-background-section-burn rounded-lg text-text-secondary transition-colors [&:not(:first-child)]:mt-1',
-        disabled ? 'shadow-xs opacity-30 cursor-not-allowed' : 'text-text-secondary hover:bg-state-accent-hover hover:text-text-accent cursor-pointer',
+        'flex items-center justify-start gap-2 rounded-lg bg-background-section-burn px-2.5 py-2 text-text-secondary transition-colors [&:not(:first-child)]:mt-1',
+        disabled ? 'cursor-not-allowed opacity-30 shadow-xs' : 'cursor-pointer text-text-secondary hover:bg-state-accent-hover hover:text-text-accent',
         className,
       )}
       onClick={handleClick}

web/app/components/workflow-app/components/workflow-children.tsx

@@ -5,10 +5,7 @@ import {
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import { DSL_EXPORT_CHECK } from '@/app/components/workflow/constants'
 import { useStore } from '@/app/components/workflow/store'
-import Features from '@/app/components/workflow/features'
 import PluginDependency from '@/app/components/workflow/plugin-dependency'
-import UpdateDSLModal from '@/app/components/workflow/update-dsl-modal'
-import DSLExportConfirmModal from '@/app/components/workflow/dsl-export-confirm-modal'
 import {
   useDSL,
   usePanelInteractions,
@@ -16,6 +13,17 @@ import {
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import WorkflowHeader from './workflow-header'
 import WorkflowPanel from './workflow-panel'
+import dynamic from 'next/dynamic'
+
+const Features = dynamic(() => import('@/app/components/workflow/features'), {
+  ssr: false,
+})
+const UpdateDSLModal = dynamic(() => import('@/app/components/workflow/update-dsl-modal'), {
+  ssr: false,
+})
+const DSLExportConfirmModal = dynamic(() => import('@/app/components/workflow/dsl-export-confirm-modal'), {
+  ssr: false,
+})
 
 const WorkflowChildren = () => {
   const { eventEmitter } = useEventEmitterContextContext()

web/app/components/workflow-app/components/workflow-panel.tsx

@@ -4,17 +4,35 @@ import { useStore } from '@/app/components/workflow/store'
 import {
   useIsChatMode,
 } from '../hooks'
-import DebugAndPreview from '@/app/components/workflow/panel/debug-and-preview'
-import Record from '@/app/components/workflow/panel/record'
-import WorkflowPreview from '@/app/components/workflow/panel/workflow-preview'
-import ChatRecord from '@/app/components/workflow/panel/chat-record'
-import ChatVariablePanel from '@/app/components/workflow/panel/chat-variable-panel'
-import GlobalVariablePanel from '@/app/components/workflow/panel/global-variable-panel'
-import VersionHistoryPanel from '@/app/components/workflow/panel/version-history-panel'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import MessageLogModal from '@/app/components/base/message-log-modal'
 import type { PanelProps } from '@/app/components/workflow/panel'
 import Panel from '@/app/components/workflow/panel'
+import dynamic from 'next/dynamic'
+
+const MessageLogModal = dynamic(() => import('@/app/components/base/message-log-modal'), {
+  ssr: false,
+})
+const Record = dynamic(() => import('@/app/components/workflow/panel/record'), {
+  ssr: false,
+})
+const ChatRecord = dynamic(() => import('@/app/components/workflow/panel/chat-record'), {
+  ssr: false,
+})
+const DebugAndPreview = dynamic(() => import('@/app/components/workflow/panel/debug-and-preview'), {
+  ssr: false,
+})
+const WorkflowPreview = dynamic(() => import('@/app/components/workflow/panel/workflow-preview'), {
+  ssr: false,
+})
+const ChatVariablePanel = dynamic(() => import('@/app/components/workflow/panel/chat-variable-panel'), {
+  ssr: false,
+})
+const GlobalVariablePanel = dynamic(() => import('@/app/components/workflow/panel/global-variable-panel'), {
+  ssr: false,
+})
+const VersionHistoryPanel = dynamic(() => import('@/app/components/workflow/panel/version-history-panel'), {
+  ssr: false,
+})
 
 const WorkflowPanelOnLeft = () => {
   const { currentLogItem, setCurrentLogItem, showMessageLogModal, setShowMessageLogModal, currentLogModalActiveTab } = useAppStore(useShallow(state => ({

web/app/components/workflow-app/index.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import {
   useMemo,
 } from 'react'

web/app/components/workflow/header/header-in-normal.tsx

@@ -50,8 +50,7 @@ const HeaderInNormal = ({
     setShowDebugAndPreviewPanel(false)
     setShowVariableInspectPanel(false)
     setShowChatVariablePanel(false)
-  }, [handleBackupDraft, workflowStore, handleNodeSelect, selectedNode,
-    setShowWorkflowVersionHistoryPanel, setShowEnvPanel, setShowDebugAndPreviewPanel, setShowVariableInspectPanel])
+  }, [workflowStore, handleBackupDraft, selectedNode, handleNodeSelect, setShowWorkflowVersionHistoryPanel, setShowEnvPanel, setShowDebugAndPreviewPanel, setShowVariableInspectPanel, setShowChatVariablePanel])
 
   return (
     <>

web/app/components/workflow/header/index.tsx

@@ -4,10 +4,17 @@ import {
 } from '../hooks'
 import type { HeaderInNormalProps } from './header-in-normal'
 import HeaderInNormal from './header-in-normal'
-import HeaderInHistory from './header-in-view-history'
 import type { HeaderInRestoringProps } from './header-in-restoring'
-import HeaderInRestoring from './header-in-restoring'
 import { useStore } from '../store'
+import dynamic from 'next/dynamic'
+
+const HeaderInHistory = dynamic(() => import('./header-in-view-history'), {
+  ssr: false,
+})
+const HeaderInRestoring = dynamic(() => import('./header-in-restoring'), {
+  ssr: false,
+})
+
 export type HeaderProps = {
   normal?: HeaderInNormalProps
   restoring?: HeaderInRestoringProps

web/app/components/workflow/index.tsx

@@ -79,10 +79,14 @@ import {
 } from './constants'
 import { WorkflowHistoryProvider } from './workflow-history-store'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import Confirm from '@/app/components/base/confirm'
 import DatasetsDetailProvider from './datasets-detail-store/provider'
 import { HooksStoreContextProvider } from './hooks-store'
 import type { Shape as HooksStoreShape } from './hooks-store'
+import dynamic from 'next/dynamic'
+
+const Confirm = dynamic(() => import('@/app/components/base/confirm'), {
+  ssr: false,
+})
 
 const nodeTypes = {
   [CUSTOM_NODE]: CustomNode,