fix: 优化打包/更改浏览器兼容策略

package.json

@@ -13,11 +13,13 @@
     "@ant-design/icons": "^5.3.6",
     "@ant-design/pro-components": "^2.7.0",
     "@ant-design/use-emotion-css": "^1.0.4",
+    "@babel/preset-env": "^7.24.5",
     "@types/crypto-js": "^4.2.2",
     "@vitejs/plugin-legacy": "^5.3.2",
     "antd": "^5.16.1",
     "autoprefixer": "^10.4.19",
     "axios": "^1.6.8",
+    "core-js": "3",
     "crypto-js": "^4.2.0",
     "gsap": "^3.12.5",
     "jsencrypt": "^3.3.2",
@@ -29,11 +31,13 @@
     "react-dom": "^18.2.0",
     "react-rotate-captcha": "^1.0.26",
     "react-router-dom": "^6.22.3",
+    "regenerator-runtime": "^0.14.1",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-svg-icons": "^2.0.1"
   },
   "devDependencies": {
+    "@rollup/plugin-babel": "^6.0.4",
     "@types/node": "^20.11.30",
     "@types/react": "^18.2.69",
     "@types/react-dom": "^18.2.22",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ dependencies:
   '@ant-design/use-emotion-css':
     specifier: ^1.0.4
     version: 1.0.4(antd@5.17.0)(react-dom@18.3.1)(react@18.3.1)
+  '@babel/preset-env':
+    specifier: ^7.24.5
+    version: 7.24.5(@babel/core@7.24.5)
   '@types/crypto-js':
     specifier: ^4.2.2
     version: 4.2.2
@@ -29,6 +32,9 @@ dependencies:
   axios:
     specifier: ^1.6.8
     version: 1.6.8
+  core-js:
+    specifier: '3'
+    version: 3.37.0
   crypto-js:
     specifier: ^4.2.0
     version: 4.2.0
@@ -62,6 +68,9 @@ dependencies:
   react-router-dom:
     specifier: ^6.22.3
     version: 6.23.0(react-dom@18.3.1)(react@18.3.1)
+  regenerator-runtime:
+    specifier: ^0.14.1
+    version: 0.14.1
   vite-plugin-compression:
     specifier: ^0.5.1
     version: 0.5.1(vite@5.2.11)
@@ -73,6 +82,9 @@ dependencies:
     version: 2.0.1(vite@5.2.11)
 
 devDependencies:
+  '@rollup/plugin-babel':
+    specifier: ^6.0.4
+    version: 6.0.4(@babel/core@7.24.5)
   '@types/node':
     specifier: ^20.11.30
     version: 20.12.8
@@ -2894,6 +2906,24 @@ packages:
     engines: {node: '>=14.0.0'}
     dev: false
 
+  /@rollup/plugin-babel@6.0.4(@babel/core@7.24.5):
+    resolution: {integrity: sha512-YF7Y52kFdFT/xVSuVdjkV5ZdX/3YtmX0QulG+x0taQOtJdHYzVU61aSSkAgVJ7NOv6qPkIYiJSgSWWN/DM5sGw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+      '@types/babel__core': ^7.1.9
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      '@types/babel__core':
+        optional: true
+      rollup:
+        optional: true
+    dependencies:
+      '@babel/core': 7.24.5
+      '@babel/helper-module-imports': 7.24.3
+      '@rollup/pluginutils': 5.1.0
+    dev: true
+
   /@rollup/pluginutils@4.2.1:
     resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
     engines: {node: '>= 8.0.0'}

src/main.tsx

@@ -6,7 +6,8 @@ import routeConfig from './router'
 import 'virtual:svg-icons-register'
 import { Provider as MobxProvider } from 'mobx-react'
 import { RootStore } from '@/store'
-import 'vite/modulepreload-polyfill'
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
 const router = createBrowserRouter(routeConfig)
 ReactDOM.createRoot(document.getElementById('root')!).render(
     // <React.StrictMode>

vite.config.ts

@@ -7,7 +7,8 @@ import * as path from 'path'
 import imagemin from 'unplugin-imagemin/vite'
 import viteCompression from 'vite-plugin-compression'
 import { createHtmlPlugin } from 'vite-plugin-html'
-import legacy from '@vitejs/plugin-legacy'
+// import legacy from '@vitejs/plugin-legacy'
+import { babel } from '@rollup/plugin-babel'
 import postcssPresetEnv from 'postcss-preset-env'
 import autoprefixer from 'autoprefixer'
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -19,13 +20,13 @@ export default defineConfig(({ mode }) => {
         base: '/',
         plugins: [
             react(),
-            legacy({
+            // legacy({
-                targets: ['ie >= 11', 'chrome 52', 'Chrome > 70', 'Safari  12.1', 'ios >= 12.3'],
+            //     targets: ['ie >= 11', 'chrome 52', 'Chrome > 70', 'Safari  12.1', 'ios >= 12.3'],
-                additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
+            //     additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
-                renderLegacyChunks: true,
+            //     renderLegacyChunks: true,
-                polyfills: ['es.promise.all-settled', 'es.object.entries'],
+            //     polyfills: ['es.promise.all-settled', 'es.object.entries'],
-                modernPolyfills: ['es.promise.all-settled', 'es.object.entries'],
+            //     modernPolyfills: ['es.promise.all-settled', 'es.object.entries'],
-            }),
+            // }),
             // 修改 icons 相关配置
             createSvgIconsPlugin({
                 // 指定需要缓存的图标文件夹
@@ -131,12 +132,31 @@ export default defineConfig(({ mode }) => {
             cssCodeSplit: true, // 启用 CSS 代码拆分
             sourcemap: false, // 构建后是否生成 source map 文件
             minify: 'esbuild', // 指定使用哪种混淆器
-            polyfillModulePreload: true,
             write: true, // 启用将构建后的文件写入磁盘
             emptyOutDir: true, // 构建时清空该目录
             brotliSize: true, // 启用 brotli 压缩大小报告
             chunkSizeWarningLimit: 2000, // chunk 大小警告的限制
             watch: null, // 设置为 {} 则会启用 rollup 的监听器
+            rollupOptions: {
+                plugins: [
+                    // https://www.npmjs.com/package/@rollup/plugin-babel
+                    babel({
+                        babelHelpers: 'bundled',
+                        presets: [
+                            [
+                                '@babel/preset-env',
+                                {
+                                    useBuiltIns: 'entry', // 注意这里只能使用 entry
+                                    corejs: '3',
+                                    targets: 'last 2 versions and not dead, > 0.2%, Firefox ESR',
+                                },
+                            ],
+                        ],
+                        plugins: [],
+                        compact: false,
+                    }),
+                ],
+            },
         },
         server: {
             proxy: {