telegram-management-system/frontend-vben/apps/web-antd/vite.config.mts

import { defineConfig } from '@vben/vite-config';
import { resolve } from 'path';
import { loadEnv } from 'vite';

export default defineConfig(async ({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  const isProduction = mode === 'production';
  
  return {
    application: {
      // 应用级配置
    },
    vite: {
      // 构建优化
      build: {
        // 启用 gzip 压缩
        reportCompressedSize: true,
        // 大文件警告阈值 (KB)
        chunkSizeWarningLimit: 1000,
        // 输出目录清理
        emptyOutDir: true,
        // Rollup 选项
        rollupOptions: {
          output: {
            // 手动分割代码
            manualChunks: {
              // Vue 相关
              vue: ['vue', 'vue-router'],
              // UI 组件库
              'ant-design-vue': ['ant-design-vue'],
              // 工具库
              'vendor-utils': ['lodash-es', 'dayjs', 'axios'],
              // 图标库
              'vendor-icons': ['@ant-design/icons-vue/es/index.js', 'lucide-vue-next'],
              // Vben 框架
              'vben-core': ['@vben/common-ui', '@vben/layouts', '@vben/stores'],
            },
            // 文件命名策略
            chunkFileNames: (chunkInfo) => {
              if (chunkInfo.name === 'vendor-utils') {
                return 'assets/js/vendor-utils-[hash].js';
              }
              if (chunkInfo.name === 'ant-design-vue') {
                return 'assets/js/antd-[hash].js';
              }
              return 'assets/js/[name]-[hash].js';
            },
            entryFileNames: 'assets/js/[name]-[hash].js',
            assetFileNames: (assetInfo) => {
              if (assetInfo.name?.endsWith('.css')) {
                return 'assets/css/[name]-[hash][extname]';
              }
              if (/\.(png|jpe?g|gif|svg|webp)$/i.test(assetInfo.name || '')) {
                return 'assets/images/[name]-[hash][extname]';
              }
              if (/\.(woff2?|eot|ttf|otf)$/i.test(assetInfo.name || '')) {
                return 'assets/fonts/[name]-[hash][extname]';
              }
              return 'assets/[name]-[hash][extname]';
            },
          },
        },
        // 生产环境优化
        ...(isProduction && {
          // 移除 console 和 debugger
          terserOptions: {
            compress: {
              drop_console: true,
              drop_debugger: true,
            },
          },
          // 启用 sourcemap 仅在开发环境
          sourcemap: false,
        }),
      },
      
      // 开发服务器配置
      server: {
        // 端口自动递增
        strictPort: false,
        // 开发服务器主机
        host: true,
        // 代理配置
        proxy: {
          // 代理后端API接口
          '/api': {
            changeOrigin: true,
            target: env.VITE_API_URL || 'http://localhost:3000',
            ws: false,
            timeout: 10000,
          },
          // 代理认证API接口（不包括前端路由）
          '^/auth/(login|logout|userInfo)$': {
            changeOrigin: true,
            target: env.VITE_API_URL || 'http://localhost:3000',
            ws: false,
            timeout: 10000,
          },
          '/user': {
            changeOrigin: true,
            target: env.VITE_API_URL || 'http://localhost:3000',
            ws: false,
            timeout: 10000,
          },
          '/system': {
            changeOrigin: true,
            target: env.VITE_API_URL || 'http://localhost:3000',
            ws: false,
            timeout: 10000,
          },
          '/telegram': {
            changeOrigin: true,
            target: env.VITE_API_URL || 'http://localhost:3000',
            ws: false,
            timeout: 10000,
          },
          // WebSocket 代理
          '/ws': {
            changeOrigin: true,
            target: env.VITE_WS_URL || 'ws://localhost:18081',
            ws: true,
          },
        },
      },
      
      // 预构建优化
      optimizeDeps: {
        include: [
          'vue',
          'vue-router',
          'ant-design-vue/es',
          '@ant-design/icons-vue/es/index.js',
          'lucide-vue-next',
          'lodash-es',
          'dayjs',
          'axios',
        ],
        // 排除不需要预构建的模块
        exclude: ['@vben/utils', '@ant-design/icons-vue'],
      },
      
      // 别名配置
      resolve: {
        alias: [
          {
            find: '~',
            replacement: resolve(__dirname, './'),
          },
          {
            find: /^@ant-design\/icons-vue$/,
            replacement: resolve(
              __dirname,
              './src/icons/ant-design-bridge.ts',
            ),
          },
        ],
      },
      
      // CSS 优化
      css: {
        // 开发环境下启用 CSS 代码分割
        devSourcemap: !isProduction,
        preprocessorOptions: {
          less: {
            // antd 变量覆盖
            modifyVars: {
              // '@primary-color': '#1890ff',
            },
            javascriptEnabled: true,
          },
        },
      },
      
      // 定义全局变量
      define: {
        __VBEN_VERSION__: JSON.stringify(process.env.npm_package_version || '1.0.0'),
        __VBEN_BUILD_TIME__: JSON.stringify(new Date().toISOString()),
      },
    },
  };
});