ax-frontend-app/vite.config.ts

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import { visualizer } from 'rollup-plugin-visualizer';

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  const apiTarget = env.VITE_API_BASE_URL || 'http://localhost:8000';

  return {
  plugins: [
    react(),
    
    // Bundle 分析工具（通过 ANALYZE=true 环境变量启用）
    process.env.ANALYZE === 'true' && visualizer({
      open: false,
      filename: 'dist/stats.html',
      gzipSize: true,
      brotliSize: true,
      template: 'treemap',
    }),
  ].filter(Boolean),

  build: {
    // Keep production output minified for Lighthouse and real deployments.
    minify: 'oxc',
    cssMinify: 'lightningcss',
    sourcemap: false,
    reportCompressedSize: true,

    // Large optional libraries are split by dynamic imports.
    chunkSizeWarningLimit: 600,

    rollupOptions: {
      output: {
        // Do not eagerly preload every dependency of the application entry.
        // Dynamic panels and export libraries should be fetched only when used.
        hoistTransitiveImports: false,
        manualChunks(id: string) {
          if (/node_modules[\\/](?:react|react-dom)[\\/]/.test(id)) {
            return 'react-vendor';
          }
          if (/node_modules[\\/](?:axios|zustand|uuid)[\\/]/.test(id)) {
            return 'utils-vendor';
          }
        },
      },
    },

    // 启用 CSS 代码分割
    cssCodeSplit: true,

    // 小于此阈值的资源将内联为 base64
    assetsInlineLimit: 4096, // 4KB
  },

  // 开发服务器配置
  server: {
    port: 5173,
    host: true,
    strictPort: true,
    open: false,
    proxy: {
      '/api': {
        target: apiTarget,
        changeOrigin: true,
      },
    },
  },

  preview: {
    port: 4173,
    host: true,
    strictPort: true,
    proxy: {
      '/api': {
        target: apiTarget,
        changeOrigin: true,
      },
    },
  },

  // 依赖预构建优化
  optimizeDeps: {
    include: [
      'react',
      'react-dom',
      'axios',
      'zustand',
      'antd',
      '@ant-design/icons',
    ],
    // 排除不需要预构建的大型依赖
    exclude: [
      'mammoth',
    ],
  },
  };
});