221 lines
3.6 KiB
Markdown
221 lines
3.6 KiB
Markdown
---
|
|
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
|
|
-->
|