build: dependency package version upgrade

d3george · Oct 18, 2024 · e0b3a18 · e0b3a18
1 parent f32d07c
commit e0b3a18
Show file tree

Hide file tree

Showing 8 changed files with 1,251 additions and 904 deletions.
diff --git a/.env.development b/.env.development
@@ -1,2 +1,3 @@
 VITE_APP_BASE_API=/api
 VITE_APP_HOMEPAGE=/dashboard/workbench
+VITE_APP_BASE_PATH=/
diff --git a/.env.production b/.env.production
@@ -1,2 +1,3 @@
 VITE_APP_BASE_API=/api
 VITE_APP_HOMEPAGE=/dashboard/workbench
+VITE_APP_BASE_PATH=/
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.13",
-    "react-helmet-async": "^1.3.0",
+    "react-helmet-async": "^2.0.5",
     "react-i18next": "^13.2.2",
     "react-icons": "^4.11.0",
     "react-markdown": "^8.0.7",
@@ -61,7 +61,6 @@
     "screenfull": "^6.0.2",
     "simplebar-react": "^3.2.4",
     "styled-components": "^6.0.9",
-    "vite": "^4.4.11",
     "zustand": "^4.4.3"
   },
   "devDependencies": {
@@ -94,7 +93,7 @@
     "eslint-plugin-unused-imports": "^2.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.3.0",
-    "msw": "2.4.9",
+    "msw": "^2.4.9",
     "postcss": "^8.4.31",
     "postcss-import": "^15.1.0",
     "postcss-nesting": "^11.3.0",
@@ -111,8 +110,9 @@
     "terser": "^5.26.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2",
+    "vite": "^5.4.9",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vite-tsconfig-paths": "^4.2.1"
+    "vite-tsconfig-paths": "^5.0.1"
   },
   "msw": {
     "workerDirectory": "public"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js
@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.4.9'
+const PACKAGE_VERSION = '2.4.11'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

diff --git a/src/router/components/auth-guard.tsx b/src/router/components/auth-guard.tsx
@@ -1,11 +1,12 @@
-import { useCallback, useEffect } from 'react';
+import { lazy, useCallback, useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
-import PageError from '@/pages/sys/error/PageError';
 import { useUserToken } from '@/store/userStore';
 
 import { useRouter } from '../hooks';
 
+const PageError = lazy(() => import('@/pages/sys/error/PageError'));
+
 type Props = {
   children: React.ReactNode;
 };

diff --git a/vite-env.d.ts b/vite-env.d.ts
@@ -4,6 +4,7 @@ interface ImportMetaEnv {
   readonly VITE_GLOB_APP_TITLE: string;
   readonly VITE_APP_BASE_API: string;
   readonly VITE_APP_HOMEPAGE: string;
+  readonly VITE_APP_BASE_PATH: string;
   readonly VITE_APP_ENV: 'development' | 'production';
 }
 

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,53 +1,69 @@
 import path from 'path';
 
 import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
+import { visualizer } from 'rollup-plugin-visualizer';
+import { defineConfig, loadEnv } from 'vite';
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  base: './',
-  esbuild: {
-    // drop: ['console', 'debugger'],
-  },
-  css: {
-    // 开css sourcemap方便找css
-    devSourcemap: true,
-  },
-  plugins: [
-    react(),
-    // 同步tsconfig.json的path设置alias
-    tsconfigPaths(),
-    createSvgIconsPlugin({
-      // 指定需要缓存的图标文件夹
-      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
-      // 指定symbolId格式
-      symbolId: 'icon-[dir]-[name]',
-    }),
-  ],
-  server: {
-    // 自动打开浏览器
-    open: true,
-    host: true,
-    port: 3001,
-    proxy: {
-      '/api': {
-        target: 'http://localhost:3000',
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, ''),
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
+  const base = env.VITE_APP_BASE_PATH || '/';
+  const isProduction = mode === 'production';
+
+  return {
+    base,
+    plugins: [
+      react(),
+      tsconfigPaths(),
+      createSvgIconsPlugin({
+        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+        symbolId: 'icon-[dir]-[name]',
+      }),
+      isProduction &&
+        visualizer({
+          open: true,
+          gzipSize: true,
+          brotliSize: true,
+        }),
+    ],
+    server: {
+      open: true,
+      host: true,
+      port: 3001,
+      proxy: {
+        '/api': {
+          target: 'http://localhost:3000',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ''),
+        },
       },
     },
-  },
-  build: {
-    target: 'esnext',
-    minify: 'terser',
-    terserOptions: {
-      compress: {
-        // 生产环境移除console
-        drop_console: true,
-        drop_debugger: true,
+    optimizeDeps: {
+      include: ['react', 'react-dom', 'react-router-dom', 'antd'],
+    },
+    esbuild: {
+      drop: isProduction ? ['console', 'debugger'] : [],
+    },
+    build: {
+      target: 'esnext',
+      minify: 'esbuild',
+      sourcemap: false,
+      cssCodeSplit: true,
+      chunkSizeWarningLimit: 1000, // 提高警告阈值到 1000 KB
+
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            'vendor-react': ['react', 'react-dom', 'react-router-dom'],
+            'vendor-antd': ['antd', '@ant-design/icons', '@ant-design/cssinjs'],
+            'vendor-charts': ['apexcharts', 'react-apexcharts'],
+            'vendor-utils': ['axios', 'dayjs', 'i18next', 'zustand'],
+            'vendor-ui': ['framer-motion', 'styled-components', '@iconify/react'],
+          },
+        },
       },
     },
-  },
+  };
 });