feat: 打包优化

vite.config.ts

@@ -7,7 +7,7 @@ import Components from 'unplugin-vue-components/vite'
 import DefineOptions from 'unplugin-vue-define-options/vite'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import path from 'path'
-import { ElementPlusResolver, AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
+import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
 
 // console.log(process)
 // console.log(import.meta.env.VITE_APP_URL)
@@ -16,14 +16,14 @@ import { ElementPlusResolver, AntDesignVueResolver } from 'unplugin-vue-componen
 
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd())
+  const isProduction = mode === 'production'
 
   return {
     plugins: [
       vue(),
       DefineOptions(),
-      // ...
       AutoImport({
-        resolvers: [ElementPlusResolver()],
+        resolvers: [],
         imports: [
           'vue',
           'vue-router',
@@ -44,17 +44,15 @@ export default defineConfig(({ mode }) => {
               'isUndefined'
             ]
           }
-        ],
+        ]
       }),
       Components({
-        resolvers: [ElementPlusResolver(), AntDesignVueResolver({ importStyle: false })]
+        resolvers: [AntDesignVueResolver({ importStyle: false })]
       }),
       createSvgIconsPlugin({
-        // 指定需要缓存的图标文件夹
         iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
-        // 指定symbolId格式
         symbolId: 'icon-[dir]-[name]',
-        inject: 'body-last' // 注入位置优化
+        inject: 'body-last'
       })
     ],
     define: {
@@ -67,7 +65,6 @@ export default defineConfig(({ mode }) => {
             'primary-color': '#ec6800'
           },
           javascriptEnabled: true,
-          // 全局导入less变量文件
           additionalData: `@import "${path.resolve(__dirname, 'src/assets/css/style.less')}";`
         }
       }
@@ -79,19 +76,113 @@ export default defineConfig(({ mode }) => {
       }
     },
     server: {
-      host: '0.0.0.0', // 允许局域网内的IP访问
-      port: 8088, // 根据环境设置端口
-      open: true, // 自动打开浏览器
-      strictPort: true, // 如果端口已被占用，则尝试下一个可用端口
+      host: '0.0.0.0',
+      port: 8088,
+      open: true,
+      strictPort: true,
       hmr: {
         overlay: true
       },
       proxy: {
         '/api': {
-          //'/api'是自行设置的请求前缀
           target: env.VITE_APP_URL,
-          changeOrigin: true, //用于控制请求头中的host值
-          rewrite: (path) => path.replace(/^\/api/, '/api') //路径重写，（正则）匹配以api开头的路径为空（将请求前缀删除）
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, '/api')
+        }
+      }
+    },
+
+    // ========== 打包配置 ==========
+    build: {
+      // 构建目标浏览器
+      target: 'es2015',
+      // 是否生成 sourcemap
+      sourcemap: isProduction ? false : 'eval',
+      // 打包文件输出目录
+      outDir: 'dist',
+      // 静态资源输出目录（相对于 outDir）
+      assetsDir: 'assets',
+      // 小于此阈值的导入将内联为 base64
+      assetsInlineLimit: 4096,
+      // 启用 CSS 代码分割
+      cssCodeSplit: true,
+      // 公共基础路径
+      publicDir: 'public',
+      // 启用 gzip 压缩大小限制
+      chunkSizeWarningLimit: 500,
+      // 自定义 chunk 分包策略
+      rollupOptions: {
+        output: {
+          // 静态资源打包命名
+          assetFileNames: (assetInfo) => {
+            const info = assetInfo.name || ''
+            if (/\.(woff|woff2?|eot|ttf|otf)$/i.test(info)) {
+              return 'assets/fonts/[name]-[hash][extname]'
+            }
+            if (/\.(png|jpe?g|gif|svg|webp|avif|ico)$/i.test(info)) {
+              return 'assets/images/[name]-[hash][extname]'
+            }
+            if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)$/i.test(info)) {
+              return 'assets/media/[name]-[hash][extname]'
+            }
+            return 'assets/[name]-[hash][extname]'
+          },
+          // chunk 分包命名
+          chunkFileNames: 'assets/js/[name]-[hash].js',
+          // 入口文件命名
+          entryFileNames: 'assets/js/[name]-[hash].js',
+          // 手动分包策略
+          manualChunks: {
+            // 核心框架
+            'vue-core': ['vue', 'vue-router', 'pinia', 'pinia-plugin-persistedstate'],
+            // 国际化
+            'vue-i18n-core': ['vue-i18n'],
+            // UI 框架
+            'ant-design': ['ant-design-vue'],
+            // 工具库
+            'utils': ['lodash-es', 'axios'],
+            // 其他依赖
+            'vendor': ['gsap', 'crypto-js']
+          }
+        }
+      },
+      // 依赖预构建优化
+      optimizeDeps: {
+        include: [
+          'vue',
+          'vue-router',
+          'pinia',
+          'vue-i18n',
+          'ant-design-vue',
+          'axios',
+          'lodash-es',
+          'gsap',
+          'crypto-js'
+        ]
+      },
+      // 压缩配置
+      minify: 'terser',
+      terserOptions: {
+        compress: {
+          drop_console: isProduction, // 生产环境移除 console
+          drop_debugger: isProduction, // 生产环境移除 debugger
+          pure_funcs: isProduction ? ['console.log'] : []
+        },
+        format: {
+          comments: false // 移除注释
+        }
+      }
+    },
+
+    // 预览服务器配置
+    preview: {
+      host: '0.0.0.0',
+      port: 8088,
+      open: true,
+      proxy: {
+        '/api': {
+          target: env.VITE_APP_URL,
+          changeOrigin: true
         }
       }
     }