From 6b4ac79f08070084527ec9f6c9fe4781b179c185 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Sun, 28 Dec 2025 22:10:53 +0800
Subject: [PATCH] refactor(web): optimize devtools loading with React.lazy

Remove runtime IS_DEV check from devtools component to make it pure.
Implement lazy loading and dynamic import in query-client.tsx to enable proper tree-shaking for production builds.
---
 web/app/components/devtools.tsx |  4 ----
 web/context/query-client.tsx    | 15 +++++++++++++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/web/app/components/devtools.tsx b/web/app/components/devtools.tsx
index 7162f9f67d..e5415ca751 100644
--- a/web/app/components/devtools.tsx
+++ b/web/app/components/devtools.tsx
@@ -4,12 +4,8 @@ import { TanStackDevtools } from '@tanstack/react-devtools'
 import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
 import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
 import * as React from 'react'
-import { IS_DEV } from '@/config'
 
 export function TanStackDevtoolsWrapper() {
-  if (!IS_DEV)
-    return null
-
   return (
     <TanStackDevtools
       plugins={[
diff --git a/web/context/query-client.tsx b/web/context/query-client.tsx
index dbfd450b2c..8882048a63 100644
--- a/web/context/query-client.tsx
+++ b/web/context/query-client.tsx
@@ -2,7 +2,14 @@
 
 import type { FC, PropsWithChildren } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { TanStackDevtoolsWrapper } from '@/app/components/devtools'
+import { lazy, Suspense } from 'react'
+import { IS_DEV } from '@/config'
+
+const TanStackDevtoolsWrapper = lazy(() =>
+  import('@/app/components/devtools').then(module => ({
+    default: module.TanStackDevtoolsWrapper,
+  })),
+)
 
 const STALE_TIME = 1000 * 60 * 30 // 30 minutes
 
@@ -19,7 +26,11 @@ export const TanstackQueryInitializer: FC<PropsWithChildren> = (props) => {
   return (
     <QueryClientProvider client={client}>
       {children}
-      <TanStackDevtoolsWrapper />
+      {IS_DEV && (
+        <Suspense fallback={null}>
+          <TanStackDevtoolsWrapper />
+        </Suspense>
+      )}
     </QueryClientProvider>
   )
 }