perf: speed up init cold start load.

remove unused deps.
add vite rollup options to split chunks.
replace global loader with sira loader.

package.json

@@ -22,10 +22,8 @@
     "@mantine/hooks": "^6.0.0",
     "@mantine/modals": "^6.0.0",
     "@mantine/notifications": "^6.0.0",
-    "@mantine/nprogress": "^6.0.0",
-    "@sira-ui/tailwind": "^0.6.1",
+    "@sira-ui/tailwind": "^0.7.0",
     "@tabler/icons-react": "^2.7.0",
-    "@uiball/loaders": "^1.2.6",
     "ahooks": "^3.7.5",
     "dayjs": "^1.11.7",
     "echarts": "^5.4.1",
@@ -36,7 +34,6 @@
     "meilisearch": "^0.31.1",
     "qs": "^6.11.0",
     "react": "^18.2.0",
-    "react-animated-numbers": "^0.16.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-json-view": "^1.21.3",

src/components/Loader/index.tsx

@@ -1,13 +1,12 @@
 import type { FC } from 'react';
-
-import { JellyTriangle } from '@uiball/loaders';
-import { useMantineTheme } from '@mantine/core';
-
 interface Props {
-  size?: number;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 }
 
-export const Loader: FC<Props> = ({ size }) => {
-  const theme = useMantineTheme();
-  return <JellyTriangle size={size ?? 60} speed={2} color={theme.colors.brand[5]} />;
+export const Loader: FC<Props> = ({ size = 'md' }) => {
+  return (
+    <div className={`${size} loader primary`}>
+      <div className="bar-bounce" />
+    </div>
+  );
 };

src/routes/index.tsx

@@ -16,7 +16,7 @@ export const AppRoutes = () => {
     <Suspense
       fallback={
         <div className={`flex full-page justify-center items-center`}>
-          <Loader size={120} />
+          <Loader size={'xl'} />
         </div>
       }
     >

vite.config.ts

@@ -14,4 +14,18 @@ export default defineConfig({
     host: true,
     port: 24900,
   },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          // node_modules is mostly the main reason for the large chunk problem,
+          // With this you're telling Vite to treat the used modules separately.
+          // To understand better what it does, try to compare the logs from the build command with and without this change.
+          if (id.includes('node_modules')) {
+            return id.toString().split('node_modules/')[1].split('/')[0].toString();
+          }
+        },
+      },
+    },
+  },
 });