perf for size

package.json

@@ -15,7 +15,8 @@
     "dev:lib": "turbo dev:lib",
     "dev:query": "turbo dev:lib --filter=@kevisual/query",
     "turbo:build": "turbo build --filter=submodules/**",
-    "build:lib": "turbo build --filter=@kevisual/query**"
+    "build:lib": "turbo build --filter=@kevisual/query**",
+    "vi": "pnpm dlx vite-bundle-visualizer -o ./dist/stats.html"
   },
   "dependencies": {
     "@ant-design/icons": "^6.0.0",

src/App.tsx

@@ -1,26 +1,36 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import { App as ContainerApp } from './pages/container';
-import { App as MapApp } from './pages/map';
-import { App as UserApp } from './pages/user';
+// import { App as ContainerApp } from './pages/container';
 import { App as UserAppApp } from './pages/app';
-import { App as FileApp } from './pages/file';
-import { App as OrgApp } from './pages/org';
-import { App as ConfigApp } from './pages/config';
-import { App as PayApp } from './pages/pay';
-import { App as DomainApp } from './pages/domain';
 import { App as HomeApp } from './pages/home';
+
+// import { App as MapApp } from './pages/map';
+// import { App as UserApp } from './pages/user';
+// import { App as FileApp } from './pages/file';
+// import { App as OrgApp } from './pages/org';
+// import { App as ConfigApp } from './pages/config';
+// import { App as DomainApp } from './pages/domain';
+
 import { basename } from './modules/basename';
 import { Redirect } from './modules/Redirect';
-import { CustomThemeProvider, useTheme, themeOptions, theme } from '@kevisual/components/theme/index.tsx';
+import { useTheme, theme } from '@kevisual/components/theme/index.tsx';
 import { ToastContainer } from 'react-toastify';
+import { lazy, Suspense } from 'react';
 import 'dayjs/locale/zh-cn';
 import 'dayjs/locale/en';
 import zhCN from 'antd/locale/zh_CN';
 import enUS from 'antd/locale/en_US';
 import ConfigProvider from 'antd/es/config-provider';
 import { useTranslation } from 'react-i18next';
-import { useEffect, useState } from 'react';
-import { ThemeProvider, createTheme } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { ThemeProvider } from '@mui/material';
+const ContainerApp = lazy(() => import('./pages/container'));
+const MapApp = lazy(() => import('./pages/map'));
+const UserApp = lazy(() => import('./pages/user'));
+const FileApp = lazy(() => import('./pages/file'));
+const OrgApp = lazy(() => import('./pages/org'));
+const ConfigApp = lazy(() => import('./pages/config'));
+const DomainApp = lazy(() => import('./pages/domain'));
+
 export const CustomThemeProvider2 = ({ children }: { children: React.ReactNode }) => {
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 };
@@ -75,7 +85,14 @@ export const App = () => {
           <Router basename={basename}>
             <Routes>
               <Route path='/' element={<Redirect to='/app/' />} />
-              <Route path='/container/*' element={<ContainerApp />} />
+              <Route
+                path='/container/*'
+                element={
+                  <Suspense fallback={'loading container'}>
+                    <ContainerApp />
+                  </Suspense>
+                }
+              />
               <Route path='/map/*' element={<MapApp />} />
               <Route path='/user-center/*' element={<UserApp />} />
               <Route path='/user/*' element={<UserApp />} />
@@ -83,7 +100,6 @@ export const App = () => {
               <Route path='/config/*' element={<ConfigApp />} />
               <Route path='/app/*' element={<UserAppApp />} />
               <Route path='/file/*' element={<FileApp />} />
-              <Route path='/pay/*' element={<PayApp />} />
               <Route path='/domain/*' element={<DomainApp />} />
               <Route path='/home/*' element={<HomeApp />} />
               <Route path='/404' element={<div>404</div>} />

src/assets/index.tsx

@@ -0,0 +1,4 @@
+import PandaPNG from '@/assets/panda.jpg';
+// import PandaPNG from '@/assets/panda.png';
+
+export { PandaPNG };

src/main.tsx

@@ -1,7 +1,6 @@
 import { createRoot } from 'react-dom/client';
 import { App } from './App.tsx';
 import './globals.css';
-import { basename } from './modules/basename.ts';
 import { Suspense } from 'react';
 import { I18NextProvider } from '@kevisual/components/translate/I18Next.tsx';
 

src/modules/layout/LayoutUser.tsx

@@ -12,7 +12,6 @@ import { useNewNavigate } from '../navicate';
 import { LogOut, Map, SquareUser, Users, X, ArrowDownLeftFromSquareIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import React from 'react';
-import { useQuickMenu } from './Menu';
 
 export const LayoutUser = () => {
   const { open, setOpen, isAdmin, ...store } = useLayoutStore(

src/modules/layout/Menu.tsx

@@ -16,6 +16,11 @@ import { Map } from 'lucide-react';
 export const useQuickMenu = () => {
   const { t } = useTranslation();
   return [
+    {
+      title: t('Home'),
+      icon: <HomeOutlined />,
+      link: '/home',
+    },
     {
       title: t('User App'),
       icon: <AppstoreOutlined />,

src/modules/layout/index.tsx

@@ -6,7 +6,7 @@ import { useLayoutStore, usePlatformStore } from './store';
 import { useShallow } from 'zustand/react/shallow';
 import { useEffect, useLayoutEffect, useState } from 'react';
 import { LayoutUser } from './LayoutUser';
-import PandaPNG from '@/assets/panda.png';
+import { PandaPNG } from '@/assets/index.tsx';
 import QRCodePNG from '@/assets/qrcode-8x8.jpg';
 import { Panel, PanelGroup } from 'react-resizable-panels';
 import clsx from 'clsx';
@@ -93,7 +93,7 @@ export const LayoutMain = (props: LayoutMainProps) => {
         </IconButton>
         <div className='flex grow justify-between pl-4 items-center'>
           <div className='flex items-center gap-2'>
-            <div className='text-xl font-bold'>{props.title}</div>
+            <div className='text-xl font-bold min-w-[140px]'>{props.title}</div>
             <div className='ml-4 flex items-center gap-2 text-sm '>
               {quickMenu.map((item, index) => {
                 const isActive = location.pathname.includes(item.link);

src/pages/app/index.tsx

@@ -14,3 +14,5 @@ export const App = () => {
     </Routes>
   );
 };
+
+export default App;

src/pages/config/index.tsx

@@ -12,3 +12,5 @@ export const App = () => {
     </Routes>
   );
 };
+
+export default App;

src/pages/container/index.tsx

@@ -16,3 +16,4 @@ export const App = () => {
   );
 };
 
+export default App;

src/pages/container/module/DrawEdit.tsx

@@ -1,5 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
-import { BaseEditor } from '@kevisual/codemirror/editor/editor.ts';
+import { lazy, useEffect, useRef, useState } from 'react';
 import { Box, Drawer } from '@mui/material';
 import { useShallow } from 'zustand/shallow';
 import { useContainerStore } from '../store';
@@ -8,6 +7,7 @@ import { IconButton } from '@kevisual/components/button/index.tsx';
 import { LeftOutlined, SaveOutlined } from '@ant-design/icons';
 // import { previewCode } from './preview-code';
 // import { StackIcons } from './StackIcons';
+import { BaseEditor } from '@kevisual/codemirror/editor/editor.ts';
 
 export const DrawEdit = () => {
   const editorElRef = useRef<HTMLDivElement>(null);

src/pages/domain/index.tsx

@@ -12,3 +12,5 @@ export const App = () => {
     </Routes>
   );
 };
+
+export default App;

src/pages/file/index.tsx

@@ -12,3 +12,5 @@ export const App = () => {
     </Routes>
   );
 };
+
+export default App;

src/pages/home/index.tsx

@@ -10,3 +10,5 @@ export const App = () => {
     </Routes>
   );
 };
+
+export default App;

src/pages/map/index.tsx

@@ -81,3 +81,6 @@ const ServerPath = () => {
   );
 };
 export const App = ServerPath;
+
+
+export default App;

src/pages/org/index.tsx

@@ -15,3 +15,5 @@ export const App = () => {
     </Routes>
   );
 };
+
+export default App;

src/pages/pay/index.tsx

@@ -2,8 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { X, ChevronRight } from 'lucide-react';
 import { usePayStore } from './store/pay';
 import { createQrcode } from './modules/create-qrcode';
-import Panda from '@/assets/panda.png';
-import Button from '@mui/material/Button/Button';
+import { Button } from '@mui/material';
 export const App = () => {
   const [isAgreed, setIsAgreed] = useState(false);
   const qrcodeRef = useRef<HTMLImageElement>(null);
@@ -38,7 +37,7 @@ export const App = () => {
         {/* Header */}
         <div className='bg-white p-3 flex justify-between items-center border-b border-gray-200'>
           <div className='flex items-center gap-2'>
-            <img src={user?.avatar ?? Panda} alt='User Avatar' className='w-8 h-8 rounded-full' />
+            <img src={user?.avatar} alt='User Avatar' className='w-8 h-8 rounded-full' />
             <div>
               <h2 className='text-base font-semibold'>{username}</h2>
               <span className='text-gray-500 text-xs'>会员：已过期</span>
@@ -89,3 +88,5 @@ export const App = () => {
     </div>
   );
 };
+
+export default App;

src/pages/user/edit/Profile.tsx

@@ -7,7 +7,7 @@ import { useShallow } from 'zustand/react/shallow';
 import { isObjectNull } from '@/utils/is-null';
 import { useLayoutStore } from '@/modules/layout/store';
 import UploadOutlined from '@ant-design/icons/UploadOutlined';
-import PandaPNG from '@/assets/panda.png';
+import { PandaPNG } from '@/assets/index.tsx';
 import { FileUpload } from '../module/FileUpload';
 import { useTranslation } from 'react-i18next';
 import { Edit, UserCog } from 'lucide-react';

src/pages/user/index.tsx

@@ -18,3 +18,5 @@ export const App = () => {
     </Routes>
   );
 };
+
+export default App;

submodules/query-login

@@ -1 +1 @@
-Subproject commit 557cd99b20ae6c051d5b448e32c6fc6075e4b04e
+Subproject commit bae8275b11d5808fd07c3172441dfc738fef525c

vite.config.ts

@@ -53,13 +53,14 @@ export default defineConfig({
   },
   base: isDev ? '/' : '/root/center/',
   build: {
+    sourcemap: false,
     rollupOptions: {
       output: {
         // 控制输出
         // 在rollup里面, hash代表将你的文件名和文件内容进行组合计算得来的结果
         assetFileNames: (chunkInfo) => {
           console.log(chunkInfo.names);
-          if (chunkInfo.names?.includes('panda.png')) {
+          if (chunkInfo.names?.includes('panda.jpg')) {
             return '[name].[ext]';
           }
           const qrcode = ['qrcode-8x8.jpg'];
@@ -69,6 +70,20 @@ export default defineConfig({
           }
           return '[name].[hash].[ext]';
         },
+        manualChunks(id) {
+          if (id.includes('node_modules')) {
+            if (id.includes('react')) {
+              return 'vendor-react';
+            }
+            // prettier
+            if (id.includes('prettier')) {
+              return 'vendor-prettier';
+            }
+            // codemirror
+            // console.log(id);
+            return 'vendor';
+          }
+        },
       },
     },
   },