gt-agent-company/.agents/skills/vite/references/build-production.md

name, description

name	description
build-production	Building for production including targets, multi-page apps, and optimizations

Building for Production

Basic Build

vite build

Uses <root>/index.html as entry point, outputs to dist/.

Browser Compatibility

Default target: Baseline Widely Available browsers (Chrome 111+, Edge 111+, Firefox 114+, Safari 16.4+).

export default defineConfig({
  build: {
    target: 'es2020',  // Or specific browsers
    // target: ['chrome64', 'firefox78', 'safari12']
  }
})

For legacy browsers:

npm add -D @vitejs/plugin-legacy

import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
})

Output Configuration

export default defineConfig({
  build: {
    outDir: 'dist',           // Output directory
    assetsDir: 'assets',      // Assets subdirectory
    emptyOutDir: true,        // Clear outDir before build
    sourcemap: true,          // Generate sourcemaps
    // sourcemap: 'inline' | 'hidden'
  }
})

Public Base Path

For deploying under a subpath:

export default defineConfig({
  base: '/my-app/'
})

Relative base (works anywhere):

export default defineConfig({
  base: './'
})

Access in code:

const base = import.meta.env.BASE_URL

Multi-Page App

import { resolve } from 'path'

export default defineConfig({
  build: {
    rolldownOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        nested: resolve(__dirname, 'nested/index.html')
      }
    }
  }
})

Minification

export default defineConfig({
  build: {
    minify: 'oxc',     // Default, fastest
    // minify: 'terser',  // More options, slower
    // minify: false,     // Disable
    
    terserOptions: {   // If using terser
      compress: {
        drop_console: true
      }
    }
  }
})

Chunk Strategy

export default defineConfig({
  build: {
    rolldownOptions: {
      output: {
        codeSplitting: {
          // Manual chunks configuration
        }
      }
    },
    chunkSizeWarningLimit: 500  // KB
  }
})

CSS Options

export default defineConfig({
  build: {
    cssCodeSplit: true,         // CSS per async chunk
    cssMinify: 'lightningcss',  // or 'esbuild'
    cssTarget: 'chrome61'       // Different from JS target
  }
})

Asset Handling

export default defineConfig({
  build: {
    assetsInlineLimit: 4096,    // Inline assets < 4KB as base64
    copyPublicDir: true         // Copy public/ to outDir
  }
})

Manifest

Generate manifest for backend integration:

export default defineConfig({
  build: {
    manifest: true  // .vite/manifest.json
  }
})

Watch Mode

Rebuild on file changes:

vite build --watch

export default defineConfig({
  build: {
    watch: {}  // Enable programmatically
  }
})

Load Error Handling

Handle dynamic import failures (e.g., after deployment):

window.addEventListener('vite:preloadError', (event) => {
  window.location.reload()
})

Build Optimizations (Automatic)

• CSS code splitting - CSS per async chunk
• Preload directives - <link rel="modulepreload">
• Async chunk optimization - Parallel fetching of dependencies

License Generation

Generate license file for dependencies:

export default defineConfig({
  build: {
    license: true  // .vite/license.md
  }
})