first

.trae/skills/vite/references/build-production.md

@@ -0,0 +1,220 @@
+---
+name: build-production
+description: Building for production including targets, multi-page apps, and optimizations
+---
+
+# Building for Production
+
+## Basic Build
+
+```bash
+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+).
+
+```ts
+export default defineConfig({
+  build: {
+    target: 'es2020',  // Or specific browsers
+    // target: ['chrome64', 'firefox78', 'safari12']
+  }
+})
+```
+
+For legacy browsers:
+
+```bash
+npm add -D @vitejs/plugin-legacy
+```
+
+```ts
+import legacy from '@vitejs/plugin-legacy'
+
+export default defineConfig({
+  plugins: [
+    legacy({
+      targets: ['defaults', 'not IE 11']
+    })
+  ]
+})
+```
+
+## Output Configuration
+
+```ts
+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:
+
+```ts
+export default defineConfig({
+  base: '/my-app/'
+})
+```
+
+Relative base (works anywhere):
+
+```ts
+export default defineConfig({
+  base: './'
+})
+```
+
+Access in code:
+
+```ts
+const base = import.meta.env.BASE_URL
+```
+
+## Multi-Page App
+
+```ts
+import { resolve } from 'path'
+
+export default defineConfig({
+  build: {
+    rolldownOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+        nested: resolve(__dirname, 'nested/index.html')
+      }
+    }
+  }
+})
+```
+
+## Minification
+
+```ts
+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
+
+```ts
+export default defineConfig({
+  build: {
+    rolldownOptions: {
+      output: {
+        codeSplitting: {
+          // Manual chunks configuration
+        }
+      }
+    },
+    chunkSizeWarningLimit: 500  // KB
+  }
+})
+```
+
+## CSS Options
+
+```ts
+export default defineConfig({
+  build: {
+    cssCodeSplit: true,         // CSS per async chunk
+    cssMinify: 'lightningcss',  // or 'esbuild'
+    cssTarget: 'chrome61'       // Different from JS target
+  }
+})
+```
+
+## Asset Handling
+
+```ts
+export default defineConfig({
+  build: {
+    assetsInlineLimit: 4096,    // Inline assets < 4KB as base64
+    copyPublicDir: true         // Copy public/ to outDir
+  }
+})
+```
+
+## Manifest
+
+Generate manifest for backend integration:
+
+```ts
+export default defineConfig({
+  build: {
+    manifest: true  // .vite/manifest.json
+  }
+})
+```
+
+## Watch Mode
+
+Rebuild on file changes:
+
+```bash
+vite build --watch
+```
+
+```ts
+export default defineConfig({
+  build: {
+    watch: {}  // Enable programmatically
+  }
+})
+```
+
+## Load Error Handling
+
+Handle dynamic import failures (e.g., after deployment):
+
+```ts
+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:
+
+```ts
+export default defineConfig({
+  build: {
+    license: true  // .vite/license.md
+  }
+})
+```
+
+<!-- 
+Source references:
+- https://vite.dev/guide/build.html
+- https://vite.dev/config/build-options.html
+-->