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,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={[

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>
   )
 }