fix:

package.json

 {
   "name": "vite-react-ts-admin",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "start": "vite --force",
@@ -89,6 +89,7 @@
     "react-style-proptype": "^3.2.2",
     "react-text-loop-next": "^0.0.3",
     "resize-observer-polyfill": "^1.5.1",
+    "rrule": "^2.7.2",
     "socket.io-client": "^4.7.2",
     "swap-array": "^1.0.0",
     "xlsx-js-style": "^1.2.0",
@@ -100,6 +101,7 @@
     "@babel/plugin-transform-react-jsx": "^7.22.15",
     "@commitlint/cli": "^17.4.4",
     "@commitlint/config-conventional": "^17.4.4",
+    "@rollup/plugin-node-resolve": "^15.2.1",
     "@types/file-saver": "^2.0.3",
     "@types/history": "^4.7.2",
     "@types/jest": "^26.0.0",
@@ -126,6 +128,7 @@
     "postcss": "^8.4.29",
     "prettier": "^2.8.4",
     "qs": "^6.11.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-visualizer": "^5.9.2",
     "stylelint": "^15.2.0",
     "stylelint-config-standard": "^30.0.1",

src/main.tsx

 import React, { Suspense } from 'react'
 import ReactDOM from 'react-dom/client'
 import { HashRouter } from 'react-router-dom'
-
+import 'devextreme/dist/css/dx.light.css'
 import App from './App'
 import SuspenceFallbackLoading from '@/layout/suspenceFallback'
 import Initial from './initial'
+
 import './app.less'
 
 const root = document.getElementById('root') as HTMLElement
@@ -16,6 +17,6 @@ ReactDOM.createRoot(root).render(
         <App />
       </HashRouter>
     </Initial>
-  </Suspense>
+  </Suspense>,
   // </React.StrictMode>
 )

vite.config.ts

-import { defineConfig, type PluginOption } from 'vite'
+import { defineConfig, type PluginOption, splitVendorChunk } from 'vite'
+import { splitVendorChunkPlugin } from 'vite'
 import react from '@vitejs/plugin-react'
 // import eslintPlugin from 'vite-plugin-eslint'
-// import commonjs from '@rollup/plugin-commonjs'
+// import commonjs from '@rollup/plugin-commonjs' // vite里面自带这个包
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import peerDepsExternal from 'rollup-plugin-peer-deps-external'
 import { visualizer } from 'rollup-plugin-visualizer'
 import viteImagemin from 'vite-plugin-imagemin'
 // import viteCompression from 'vite-plugin-compression'
@@ -18,28 +21,28 @@ const chunkFileNames = `${assetDir}/js/[name]-[hash]-chunk.js`
 const assets: any[] = [
   {
     output: `${assetDir}/img/[name]-[hash][extname]`,
-    regex: /\.(png|jpe?g|gif|svg|webp|avif)$/
+    regex: /\.(png|jpe?g|gif|svg|webp|avif)$/,
   },
   {
     regex: /\.css$/,
-    output: `${assetDir}/css/[name]-[hash][extname]`
+    output: `${assetDir}/css/[name]-[hash][extname]`,
   },
   {
     output: `${assetDir}/js/[name]-[hash][extname]`,
-    regex: /\.js$/
+    regex: /\.js$/,
   },
   {
     output: '[name][extname]',
-    regex: /\.xml$/
-  }
+    regex: /\.xml$/,
+  },
 ]
 
 // answer from https://stackoverflow.com/questions/74620427/how-to-configure-vite-to-allow-jsx-syntax-in-js-files
 // https://vitejs.dev/config/
 export default defineConfig(({ command, mode }) => ({
-  plugins:
-    command === 'build'
-      ? [
+  plugins: [
+    // Preferably set as first plugin.
+    // peerDepsExternal(),
     react({}),
     // eslintPlugin({
     //   include: ['src/**/*.js', 'src/**/*.ts', 'src/**/*.tsx', 'src/*.js', 'src/*.ts', 'src/*.tsx']
@@ -47,86 +50,103 @@ export default defineConfig(({ command, mode }) => ({
     viteMockServe({
       // default
       localEnabled: mode === 'mock',
-            mockPath: './mock'
+      mockPath: './mock',
     }),
+    // splitVendorChunkPlugin(),
     viteImagemin(),
+    // nodeResolve(),
     // viteCompression(),
-          visualizer() as PluginOption
-        ]
-      : [
-          react({}),
-          // eslintPlugin({
-          //   include: ['src/**/*.js', 'src/**/*.ts', 'src/**/*.tsx', 'src/*.js', 'src/*.ts', 'src/*.tsx']
-          // }),
-          viteMockServe({
-            // default
-            localEnabled: mode === 'mock',
-            mockPath: './mock'
-          })
+    visualizer() as any,
   ],
   optimizeDeps: {
     // force: true, //to make sure that the cache is updated
     // disabled: false
   },
+  esbuild: {
+    drop: ['console', 'debugger'],
+  },
   resolve: {
     extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.sass', '.scss'], // 忽略输入的扩展名
     alias: [
-      { find: 'devextreme/ui', replacement: 'devextreme/esm/ui' },
+      // https://js.devexpress.com/Documentation/Guide/Vue_Components/Add_DevExtreme_to_a_Vue_Application/?search=vite
+      {
+        find: 'devextreme/ui',
+        replacement: 'devextreme/esm/ui',
+      },
       { find: 'umi', replacement: path.resolve(__dirname, 'src/umi') },
       { find: /^~/, replacement: '' },
       { find: '@', replacement: path.resolve(__dirname, 'src') },
       {
         find: '@components',
-        replacement: path.resolve(__dirname, 'src/components')
+        replacement: path.resolve(__dirname, 'src/components'),
       },
       { find: '@config', replacement: path.resolve(__dirname, 'config') },
       {
         find: 'loadash',
-        replacement: 'lodash-es'
+        replacement: 'lodash-es',
       },
       {
         find: 'prop-types',
-        replacement: 'prop-types'
-      }
-    ]
+        replacement: 'prop-types',
+      },
+    ],
   },
   css: {
     preprocessorOptions: {
       less: {
         // 支持内联 JavaScript
-        javascriptEnabled: true
-      }
-    }
+        javascriptEnabled: true,
+      },
+    },
   },
   server: {
-    proxy: proxy[mode]
+    proxy: proxy[mode],
   },
   build: {
     // 打包出map文件
-    sourcemap: false,
+    sourcemap: true,
     commonjsOptions: {
-      transformMixedEsModules: true
+      transformMixedEsModules: true,
+      // include: [
+      //   './node_modules/devextreme/**',
+      //   './node_modules/devextreme-react/**',
+      // ],
     },
-    minify: true,
-    assetsDir: assetDir,
-    // don't inline anything for demo
-    assetsInlineLimit: 0,
-    emptyOutDir: true,
+    // minify: false,
+    // assetsDir: '.',
+    // assetsInlineLimit: 0,
+    // emptyOutDir: true,
     rollupOptions: {
+      // 参考 https://js.devexpress.com/Documentation/Guide/Vue_Components/Add_DevExtreme_to_a_Vue_Application/?search=vite
+      treeshake: false,
+      plugins: [
+        // {
+        //   name: 'no-treeshake',
+        //   transform(_, id) {
+        //     if (id.includes('ui/data_grid')) {
+        //       return { moduleSideEffects: 'no-treeshake' }
+        //     }
+        //   },
+        // },
+      ],
       output: {
-        entryFileNames: entryFileNames,
-        assetFileNames: info => {
-          if (info && info.name) {
-            const name = info.name as string
-            const result = assets.find(a => a.regex.test(name))
-            if (result) {
-              return result.output
-            }
-          }
-          return `${assetDir}/[name]-[hash][extname]`
-        },
-        chunkFileNames: chunkFileNames
-      }
-    }
-  }
+        // manualChunks: {
+        //   vendor: ['react', 'react-dom', 'devextreme-react'],
+        // },
+        // entryFileNames: entryFileNames,
+        // assetFileNames: info => {
+        //   if (info && info.name) {
+        //     const name = info.name as string
+        //     const result = assets.find(a => a.regex.test(name))
+        //     if (result) {
+        //       return result.output
+        //     }
+        //   }
+        //   return `${assetDir}/[name]-[hash][extname]`
+        // },
+        // chunkFileNames: chunkFileNames,
+        // compact: true,
+      },
+    },
+  },
 }))