perf: 开发模式不加载 PageSpy，优化 main.js 代码

src/components/ErrorPage.jsx

@@ -1,16 +1,16 @@
-import { useRouteError } from "react-router-dom";
+import { useRouteError } from 'react-router-dom'
-import { Card, Typography, Flex, Result, Button } from 'antd'
+import { Result } from 'antd'
 
 export default function ErrorPage() {
-  const errorResponse = useRouteError();
+  const errorResponse = useRouteError()
-  console.info('error: ');
+  if (import.meta.env.PROD && window.$pageSpy) {
-  console.dir(errorResponse.message);
+    window.$pageSpy.triggerPlugins('onOfflineLog', 'upload')
-  window.$pageSpy.triggerPlugins('onOfflineLog', 'upload');
+  }
   return (
     <Result
-    status="404"
+      status="404"
-    title="Sorry, an unexpected error has occurred."
+      title="Sorry, an unexpected error has occurred."
-    subTitle={errorResponse?.message || errorResponse.error?.message}
+      subTitle={errorResponse?.message || errorResponse.error?.message}
-  />
+    />
-  );
+  )
 }

src/main.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import { ThemeContext } from '@/stores/ThemeContext'
 import AuthApp from '@/views/AuthApp'
@@ -17,11 +17,11 @@ import ChatWindow from '@/views/ChatWindow'
 import MobileConversation from '@/views/mobile/Conversation'
 import MobileChat from '@/views/mobile/Chat'
 import CallCenter from '@/views/CallCenter'
-import MobileSecondHeader from '@/views/mobile/SecondHeaderWrapper';
+import MobileSecondHeader from '@/views/mobile/SecondHeaderWrapper'
-import CustomerProfile from '@/views/Conversations/Online/order/CustomerProfile';
+import CustomerProfile from '@/views/Conversations/Online/order/CustomerProfile'
 
-import Unassign from '@/views/ChatUnassign';
+import Unassign from '@/views/ChatUnassign'
-import ChatAssign from '@/views/Conversations/ChatAssign';
+import ChatAssign from '@/views/Conversations/ChatAssign'
 
 import DingdingLogin from '@/views/dingding/Login'
 import useAuthStore from '@/stores/AuthStore'
@@ -29,7 +29,10 @@ import '@/assets/index.css'
 
 useAuthStore.getState().loadUserSession()
 
-const isMobileApp = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) !== null;
+const isMobileApp =
+  navigator.userAgent.match(
+    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
+  ) !== null
 
 const router = createBrowserRouter([
   {
@@ -86,12 +89,38 @@ const router = createBrowserRouter([
       { path: 'dingding/callback', element: <DingdingCallback /> },
     ],
   },
-]);
+])
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+const root = document.getElementById('root')
-  // <React.StrictMode>
+if (!root) throw new Error('No root element found')
-  <ThemeContext.Provider value={{ colorPrimary: '#1ba784', borderRadius: 4 }}>
+
-      <RouterProvider router={router} fallbackElement={() => <div>Loading...</div>} />
+createRoot(root).render(
-  </ThemeContext.Provider>
+  <React.Suspense
-  // </React.StrictMode>
+    fallback={
-);
+      <div className="flex h-screen w-screen items-center justify-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className={'animate-spin h-24 w-24 text-slate-600'}
+          >
+            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+          </svg>
+          <span className="sr-only">Loading</span>
+      </div>
+    }
+  >
+    <ThemeContext.Provider value={{ colorPrimary: '#1ba784', borderRadius: 4 }}>
+      <RouterProvider
+        router={router}
+        fallbackElement={() => <div>Loading...</div>}
+      />
+    </ThemeContext.Provider>
+  </React.Suspense>,
+)

src/utils/pagespy.js

@@ -1,6 +1,9 @@
 import { loadScript } from '@/utils/commons';
 
 export const loadPageSpy = (title) => {
+
+  if (import.meta.env.DEV || window.$pageSpy) return
+
   const PageSpySrc = [
     'https://page-spy.mycht.cn/page-spy/index.min.js',
     'https://page-spy.mycht.cn/plugin/data-harbor/index.min.js',