From 8717a789b39cc1046f82b329e81042dc4ffb9dfb Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Wed, 6 Aug 2025 11:40:30 +0800
Subject: [PATCH] feat: dynamically import panel components to improve
 performance

---
 .../rag-pipeline/components/panel/index.tsx   | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/web/app/components/rag-pipeline/components/panel/index.tsx b/web/app/components/rag-pipeline/components/panel/index.tsx
index c26f43a427..e2fd958405 100644
--- a/web/app/components/rag-pipeline/components/panel/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/index.tsx
@@ -5,11 +5,23 @@ import {
 import type { PanelProps } from '@/app/components/workflow/panel'
 import Panel from '@/app/components/workflow/panel'
 import { useStore } from '@/app/components/workflow/store'
-import Record from '@/app/components/workflow/panel/record'
-import TestRunPanel from './test-run'
-import InputFieldPanel from './input-field'
-import PreviewPanel from './input-field/preview'
-import InputFieldEditorPanel from './input-field/editor'
+import dynamic from 'next/dynamic'
+
+const Record = dynamic(() => import('@/app/components/workflow/panel/record'), {
+  ssr: false,
+})
+const TestRunPanel = dynamic(() => import('@/app/components/rag-pipeline/components/panel/test-run'), {
+  ssr: false,
+})
+const InputFieldPanel = dynamic(() => import('./input-field'), {
+  ssr: false,
+})
+const InputFieldEditorPanel = dynamic(() => import('./input-field/editor'), {
+  ssr: false,
+})
+const PreviewPanel = dynamic(() => import('./input-field/preview'), {
+  ssr: false,
+})
 
 const RagPipelinePanelOnRight = () => {
   const historyWorkflowData = useStore(s => s.historyWorkflowData)