fix conflicts

src/pages/Docs/index.tsx

@@ -5,7 +5,7 @@ import { Suspense } from 'react';
 import { LoadingFallback } from '@/components/LoadingFallback';
 import { TransitionContextWrapper } from '@/components/Transition';
 
-export const Docs = () => {
+const Docs = () => {
   return (
     <div className="docs">
       <Suspense fallback={<LoadingFallback />}>
@@ -17,3 +17,5 @@ export const Docs = () => {
     </div>
   );
 };
+
+export default Docs;

src/pages/Layouts/NavMenu/index.tsx

@@ -63,14 +63,16 @@ export const NavMenuOnPc = () => {
     >
       {/* Replay labs */}
       {isDoc && (
-        <Link to="/replay-lab" className="menu-item labs">
-          <Space align="center">
-            <Icon component={ReplaySvg} style={{ fontSize: 18 }} />
-            <span>{t('common.replay-lab')}</span>
-          </Space>
-        </Link>
+        <>
+          <Link to="/replay-lab" className="menu-item labs">
+            <Space align="center">
+              <Icon component={ReplaySvg} style={{ fontSize: 18 }} />
+              <span>{t('common.replay-lab')}</span>
+            </Space>
+          </Link>
+          <Divider type="vertical" className="divider-bg" />
+        </>
       )}
-      <Divider type="vertical" className="divider-bg" />
       {/* Docs */}
       <Link to="/docs" className="menu-item doc">
         <Space align="center">

src/pages/LogList/index.tsx

@@ -72,7 +72,7 @@ const FILE_STATUS: Record<
   },
 };
 
-export const LogList = () => {
+const LogList = () => {
   const [form] = Form.useForm();
   const { t } = useTranslation();
 
@@ -454,3 +454,5 @@ export const LogList = () => {
     </Layout>
   );
 };
+
+export default LogList;

src/pages/Replay/index.tsx

@@ -21,7 +21,7 @@ import { useEventListener } from '@/utils/useEventListener';
 import { useShallow } from 'zustand/react/shallow';
 import { ErrorDetailDrawer } from '@/components/ErrorDetailDrawer';
 
-export const Replay = () => {
+const Replay = () => {
   const { t } = useTranslation();
   const { url } = useSearch();
   const setAllData = useReplayStore((state) => state.setAllData);
@@ -147,3 +147,5 @@ export const Replay = () => {
     </div>
   );
 };
+
+export default Replay;

src/pages/ReplayLabs/index.tsx

@@ -10,7 +10,7 @@ import { isDoc } from '@/utils/constants';
 import { useThreshold } from '@/utils/useThreshold';
 import { useTranslation } from 'react-i18next';
 
-export const ReplayLabs = () => {
+const ReplayLabs = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'lab' });
   const isMobile = useThreshold();
 
@@ -85,3 +85,5 @@ export const ReplayLabs = () => {
     </div>
   );
 };
+
+export default ReplayLabs;

src/pages/RoomList/index.tsx

@@ -85,7 +85,7 @@ const filterConnections = (
     });
 };
 
-export const RoomList = () => {
+const RoomList = () => {
   const [form] = Form.useForm();
   const { t } = useTranslation();
 
@@ -310,3 +310,5 @@ export const RoomList = () => {
     </Layout>
   );
 };
+
+export default RoomList;

src/routes/config.tsx

@@ -2,17 +2,16 @@ import { RouteObject } from 'react-router-dom';
 import { useRoutes } from 'react-router-dom';
 
 import { Page404, To404 } from '@/404';
-// import Devtools from '@/pages/Devtools';
 import { Layouts } from '@/pages/Layouts';
 import { Home } from '@/pages/Home';
 import React from 'react';
-import { RoomList } from '@/pages/RoomList';
-import { Docs } from '@/pages/Docs';
-import { Replay } from '@/pages/Replay';
-import { LogList } from '@/pages/LogList';
-import { ReplayLabs } from '@/pages/ReplayLabs';
 
 const Devtools = React.lazy(() => import('@/pages/Devtools'));
+const RoomList = React.lazy(() => import('@/pages/RoomList'));
+const Docs = React.lazy(() => import('@/pages/Docs'));
+const Replay = React.lazy(() => import('@/pages/Replay'));
+const LogList = React.lazy(() => import('@/pages/LogList'));
+const ReplayLabs = React.lazy(() => import('@/pages/ReplayLabs'));
 
 export interface RouteInfo {
   icon?: any;

vite.config.mjs

@@ -17,6 +17,15 @@ export default ({ mode, command }) => {
       target: ['chrome100'],
       sourcemap: isProd ? 'hidden' : true,
       outDir: isDoc ? 'docs-dist' : 'dist',
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            react: ['react'],
+            'react-dom': ['react-dom'],
+            'react-router-dom': ['react-router-dom'],
+          },
+        },
+      },
     },
     resolve: {
       alias: [{ find: '@', replacement: path.join(__dirname, './src') }],