feat: 首页加载速度优化

web/package.json

@@ -17,7 +17,6 @@
     "react-dropzone": "^14.2.3",
     "react-fireworks": "^1.0.4",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "5.0.1",
     "react-telegram-login": "^1.1.2",
     "react-toastify": "^9.0.8",
     "react-turnstile": "^1.0.5",

web/src/App.js

@@ -22,9 +22,10 @@ import Log from './pages/Log';
 import Chat from './pages/Chat';
 import { Layout } from '@douyinfe/semi-ui';
 import Midjourney from './pages/Midjourney';
-import Detail from './pages/Detail';
+// import Detail from './pages/Detail';
 
 const Home = lazy(() => import('./pages/Home'));
+const Detail = lazy(() => import('./pages/Detail'));
 const About = lazy(() => import('./pages/About'));
 
 function App() {
@@ -202,7 +203,9 @@ function App() {
             path="/detail"
             element={
               <PrivateRoute>
+                <Suspense fallback={<Loading></Loading>}>
                   <Detail />
+                </Suspense>
               </PrivateRoute>
             }
           />
@@ -210,7 +213,9 @@ function App() {
             path="/midjourney"
             element={
               <PrivateRoute>
+                <Suspense fallback={<Loading></Loading>}>
                   <Midjourney />
+                </Suspense>
               </PrivateRoute>
             }
           />

web/src/components/Loading.js

@@ -1,13 +1,9 @@
 import React from 'react';
-import { Dimmer, Loader, Segment } from 'semantic-ui-react';
+import { Spin } from '@douyinfe/semi-ui';
 
 const Loading = ({ prompt: name = 'page' }) => {
   return (
-    <Segment style={{ height: 100 }}>
+    <Spin style={{height: 100}} spinning={true}>加载{name}中...</Spin>
-      <Dimmer active inverted>
-        <Loader indeterminate>加载{name}中...</Loader>
-      </Dimmer>
-    </Segment>
   );
 };
 

web/src/index.js

@@ -1,4 +1,3 @@
-import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {BrowserRouter} from 'react-router-dom';
@@ -15,9 +14,7 @@ import {Layout} from "@douyinfe/semi-ui";
 import SiderBar from "./components/SiderBar";
 
 // initialization
-initVChartSemiTheme({
+
-    isWatchingThemeSwitch: true,
-});
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 const {Sider, Content, Header} = Layout;

web/src/pages/Detail/index.js

@@ -1,4 +1,6 @@
 import React, {useEffect, useRef, useState} from 'react';
+import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
+
 import {Button, Col, Form, Layout, Row, Spin} from "@douyinfe/semi-ui";
 import VChart from '@visactor/vchart';
 import {API, isAdmin, showError, timestamp2string, timestamp2string1} from "../../helpers";
@@ -292,6 +294,9 @@ const Detail = (props) => {
         //     formRef.current.formApi.setValue('start_timestamp', st);
         // }
         if (!initialized.current) {
+            initVChartSemiTheme({
+                isWatchingThemeSwitch: true,
+            });
             initialized.current = true;
             initChart();
         }

web/vite.config.js

@@ -1,6 +1,5 @@
 import { defineConfig, transformWithEsbuild } from 'vite';
 import react from '@vitejs/plugin-react';
-import { splitVendorChunkPlugin } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -19,7 +18,6 @@ export default defineConfig({
       },
     },
     react(),
-    splitVendorChunkPlugin()
   ],
   optimizeDeps: {
     force: true,
@@ -33,11 +31,12 @@ export default defineConfig({
     rollupOptions: {
       output: {
         manualChunks: {
-          'react-vendor': ['react', 'react-dom'],
+          'react-core': ['react', 'react-dom', 'react-router-dom'],
-          'semi': ['@douyinfe/semi-ui'],
+          'semi-ui': ['@douyinfe/semi-icons', '@douyinfe/semi-ui'],
-          'icons': ['@douyinfe/semi-icons'],
+          'semantic': ['semantic-ui-css', 'semantic-ui-react'],
-          'semantic': ['semantic-ui-react'],
+          'visactor': ['@visactor/react-vchart', '@visactor/vchart'],
-          'visactor': ['@visactor/react-vchart', '@visactor/vchart']
+          'tools': ['axios', 'history', 'marked'],
+          'react-components': ['react-dropzone', 'react-fireworks', 'react-telegram-login', 'react-toastify', 'react-turnstile'],
         },
       },
     },