Vite Expert

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'

export default defineConfig(({ command, mode }) => {
  const config = {
    // ESM-optimized build targets
    build: {
      target: ['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14'],
      // Modern output formats
      outDir: 'dist',
      assetsDir: 'assets',
      // Enable CSS code splitting
      cssCodeSplit: true,
      // Optimize for modern browsers
      minify: 'esbuild', // Faster than terser
      rollupOptions: {
        output: {
          // Manual chunking for better caching
          manualChunks: {
            vendor: ['react', 'react-dom'],
            router: ['react-router-dom'],
            ui: ['@mui/material', '@emotion/react']
          }
        }
      }
    },
    // Dependency optimization
    optimizeDeps: {
      include: [
        'react/jsx-runtime',
        'react/jsx-dev-runtime',
        'react-dom/client'
      ],
      exclude: ['@vite/client'],
      // Force re-optimization for debugging
      force: false
    }
  }

  if (command === 'serve') {
    // Development optimizations
    config.define = {
      __DEV__: true,
      'process.env.NODE_ENV': '"development"'
    }
    config.server = {
      port: 3000,
      strictPort: true,
      host: true,
      hmr: {
        overlay: true
      }
    }
  } else {
    // Production optimizations
    config.define = {
      __DEV__: false,
      'process.env.NODE_ENV': '"production"'
    }
  }

  return config
})

export default defineConfig({
  environments: {
    // Client-side environment
    client: {
      build: {
        outDir: 'dist/client',
        rollupOptions: {
          input: resolve(__dirname, 'index.html')
        }
      }
    },
    // SSR environment
    ssr: {
      build: {
        outDir: 'dist/server',
        ssr: true,
        rollupOptions: {
          input: resolve(__dirname, 'src/entry-server.js'),
          external: ['express']
        }
      }
    }
  }
})

export default defineConfig({
  server: {
    // Warm up frequently used files
    warmup: {
      clientFiles: [
        './src/components/App.jsx',
        './src/utils/helpers.js',
        './src/hooks/useAuth.js'
      ]
    },
    // File system optimization
    fs: {
      allow: ['..', '../shared-packages']
    },
    // Proxy API calls
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        configure: (proxy, options) => {
          // Custom proxy configuration
          proxy.on('error', (err, req, res) => {
            console.log('Proxy error:', err)
          })
        }
      },
      '/socket.io': {
        target: 'ws://localhost:8000',
        ws: true,
        changeOrigin: true
      }
    }
  },
  // Advanced dependency optimization
  optimizeDeps: {
    // Include problematic packages
    include: [
      'lodash-es',
      'date-fns',
      'react > object-assign'
    ],
    // Exclude large packages
    exclude: [
      'some-large-package'
    ],
    // Custom esbuild options
    esbuildOptions: {
      keepNames: true,
      plugins: [
        // Custom esbuild plugins
      ]
    }
  }
})

// In application code
if (import.meta.hot) {
  // Accept updates to this module
  import.meta.hot.accept()
  
  // Accept updates to specific dependencies
  import.meta.hot.accept('./components/Header.jsx', (newModule) => {
    // Handle specific module updates
    console.log('Header component updated')
  })
  
  // Custom disposal logic
  import.meta.hot.dispose(() => {
    // Cleanup before hot update
    clearInterval(timer)
    removeEventListeners()
  })
  
  // Invalidate when dependencies change
  import.meta.hot.invalidate()
}

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // Intelligent chunking strategy
        manualChunks: (id) => {
          // Vendor libraries
          if (id.includes('node_modules')) {
            // Separate React ecosystem
            if (id.includes('react') || id.includes('react-dom')) {
              return 'react-vendor'
            }
            // UI libraries
            if (id.includes('@mui') || id.includes('@emotion')) {
              return 'ui-vendor'
            }
            // Utilities
            if (id.includes('lodash') || id.includes('date-fns')) {
              return 'utils-vendor'
            }
            // Everything else
            return 'vendor'
          }
          
          // Application code splitting
          if (id.includes('src/components')) {
            return 'components'
          }
          if (id.includes('src/pages')) {
            return 'pages'
          }
        },
        // Optimize chunk loading
        chunkFileNames: (chunkInfo) => {
          const facadeModuleId = chunkInfo.facadeModuleId
          if (facadeModuleId && facadeModuleId.includes('node_modules')) {
            return 'vendor/[name].[hash].js'
          }
          return 'chunks/[name].[hash].js'
        }
      }
    },
    // Build performance
    target: 'es2020',
    minify: 'esbuild',
    sourcemap: true,
    // Chunk size warnings
    chunkSizeWarningLimit: 1000,
    // Asset naming
    assetsDir: 'static',
    // CSS optimization
    cssTarget: 'chrome87',
    cssMinify: true
  }
})

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.ts'),
      name: 'MyLibrary',
      fileName: (format) => `my-library.${format}.js`,
      formats: ['es', 'cjs', 'umd']
    },
    rollupOptions: {
      // Externalize dependencies
      external: [
        'react',
        'react-dom',
        'react/jsx-runtime'
      ],
      output: {
        // Global variables for UMD build
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        },
        // Preserve modules structure for tree shaking
        preserveModules: true,
        preserveModulesRoot: 'lib'
      }
    }
  }
})

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import legacy from '@vitejs/plugin-legacy'
import { visualizer } from 'rollup-plugin-visualizer'
import eslint from 'vite-plugin-eslint'

export default defineConfig({
  plugins: [
    // React with SWC for faster builds
    react({
      jsxRuntime: 'automatic',
      jsxImportSource: '@emotion/react',
      babel: {
        plugins: ['@emotion/babel-plugin']
      }
    }),
    
    // ESLint integration
    eslint({
      include: ['src/**/*.{ts,tsx,js,jsx}'],
      exclude: ['node_modules', 'dist'],
      cache: false // Disable in development for real-time checking
    }),
    
    // Legacy browser support
    legacy({
      targets: ['defaults', 'not IE 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    }),
    
    // Bundle analysis
    visualizer({
      filename: 'dist/stats.html',
      open: process.env.ANALYZE === 'true',
      gzipSize: true,
      brotliSize: true
    })
  ]
})

// vite-plugin-env-vars.js
function envVarsPlugin(options = {}) {
  return {
    name: 'env-vars',
    config(config, { command }) {
      // Inject environment variables
      const env = loadEnv(command === 'serve' ? 'development' : 'production', process.cwd(), '')
      
      config.define = {
        ...config.define,
        __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
        __BUILD_TIME__: JSON.stringify(new Date().toISOString())
      }
      
      // Add environment-specific variables
      Object.keys(env).forEach(key => {
        if (key.startsWith('VITE_')) {
          config.define[`process.env.${key}`] = JSON.stringify(env[key])
        }
      })
    },
    
    configureServer(server) {
      // Development middleware
      server.middlewares.use('/api/health', (req, res) => {
        res.setHeader('Content-Type', 'application/json')
        res.end(JSON.stringify({ status: 'ok', timestamp: Date.now() }))
      })
    },
    
    generateBundle(options, bundle) {
      // Generate manifest
      const manifest = {
        version: process.env.npm_package_version,
        buildTime: new Date().toISOString(),
        chunks: Object.keys(bundle)
      }
      
      this.emitFile({
        type: 'asset',
        fileName: 'manifest.json',
        source: JSON.stringify(manifest, null, 2)
      })
    }
  }
}

# Check dependency optimization cache
ls -la node_modules/.vite/deps/
# Analyze package.json for problematic dependencies
grep -E "(^[[:space:]]*\"[^\"]*\":[[:space:]]*\".*)" package.json | grep -v "workspace:" | head -20
# Check for mixed ESM/CJS modules
find node_modules -name "package.json" -exec grep -l "\"type\".*module" {} \; | head -10

# Test HMR WebSocket connection
curl -s http://localhost:5173/__vite_ping
# Check for circular dependencies
grep -r "import.*from.*\.\." src/ | head -10
# Verify file watching
lsof -p $(pgrep -f vite) | grep -E "(txt|js|ts|jsx|tsx|vue|svelte)"

# Generate bundle analysis
npm run build && npx vite-bundle-analyzer dist --no-open
# Check for duplicate dependencies
npm ls --depth=0 | grep -E "deduped|UNMET"
# Analyze chunk sizes
ls -lah dist/assets/ | sort -k5 -hr | head -10

# Check file existence and case sensitivity
find src -name "*.js" -o -name "*.ts" -o -name "*.jsx" -o -name "*.tsx" | head -20
# Verify alias configuration
grep -A10 -B5 "alias:" vite.config.*
# Check import paths
grep -r "import.*from ['\"]\./" src/ | head -10

# Test SSR build
npm run build:ssr || vite build --ssr src/entry-server.js
# Check for client-only code in SSR
grep -r "window\|document\|localStorage" src/server/ || echo "No client-only code found"
# Verify SSR entry points
ls -la src/entry-server.* src/entry-client.*

# Check plugin versions
npm list | grep -E "(vite|@vitejs|rollup-plugin|vite-plugin)" | head -15
# Verify plugin order
grep -A20 "plugins.*\[" vite.config.*
# Test minimal plugin configuration
echo 'export default { plugins: [] }' > vite.config.minimal.js && vite build --config vite.config.minimal.js

# Check environment variable names
grep -r "process\.env\|import\.meta\.env" src/ | head -10
# Verify VITE_ prefix
env | grep VITE_ || echo "No VITE_ prefixed variables found"
# Test define configuration
grep -A10 "define:" vite.config.*

// Import assets with explicit types
import logoUrl from './logo.png?url'           // URL import
import logoInline from './logo.svg?inline'     // Inline SVG
import logoRaw from './shader.glsl?raw'        // Raw text
import workerScript from './worker.js?worker'  // Web Worker

// Dynamic asset imports
const getAsset = (name) => {
  return new URL(`./assets/${name}`, import.meta.url).href
}

// CSS modules
import styles from './component.module.css'

// vite-env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_BASE_URL: string
  readonly VITE_APP_TITLE: string
  readonly VITE_ENABLE_ANALYTICS: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

// Asset type declarations
declare module '*.svg' {
  import React from 'react'
  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
  export { ReactComponent }
  const src: string
  export default src
}

declare module '*.module.css' {
  const classes: { readonly [key: string]: string }
  export default classes
}

// Performance analysis configuration
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // Analyze bundle composition
        manualChunks: (id) => {
          if (id.includes('node_modules')) {
            // Log large dependencies
            const match = id.match(/node_modules\/([^/]+)/)
            if (match) {
              console.log(`Dependency: ${match[1]}`)
            }
          }
        }
      }
    }
  },
  plugins: [
    // Custom performance plugin
    {
      name: 'performance-monitor',
      generateBundle(options, bundle) {
        const chunks = Object.values(bundle).filter(chunk => chunk.type === 'chunk')
        const assets = Object.values(bundle).filter(chunk => chunk.type === 'asset')
        
        console.log(`Generated ${chunks.length} chunks and ${assets.length} assets`)
        
        // Report large chunks
        chunks.forEach(chunk => {
          if (chunk.code && chunk.code.length > 100000) {
            console.warn(`Large chunk: ${chunk.fileName} (${chunk.code.length} bytes)`)
          }
        })
      }
    }
  ]
})

// Step-by-step CRA migration
export default defineConfig({
  // 1. Replace CRA scripts
  plugins: [react()],
  
  // 2. Configure public path
  base: process.env.PUBLIC_URL || '/',
  
  // 3. Handle environment variables
  define: {
    'process.env.REACT_APP_API_URL': JSON.stringify(process.env.VITE_API_URL),
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  },
  
  // 4. Configure build output
  build: {
    outDir: 'build',
    sourcemap: true
  },
  
  // 5. Handle absolute imports
  resolve: {
    alias: {
      src: resolve(__dirname, 'src')
    }
  }
})

// packages/app/vite.config.js
export default defineConfig({
  // Resolve shared packages
  resolve: {
    alias: {
      '@shared/ui': resolve(__dirname, '../shared-ui/src'),
      '@shared/utils': resolve(__dirname, '../shared-utils/src')
    }
  },
  
  // Optimize shared dependencies
  optimizeDeps: {
    include: [
      '@shared/ui',
      '@shared/utils'
    ]
  },
  
  // Server configuration for workspace
  server: {
    fs: {
      allow: [
        resolve(__dirname, '..'),  // Allow parent directory
        resolve(__dirname, '../shared-ui'),
        resolve(__dirname, '../shared-utils')
      ]
    }
  }
})