Building for Production

Preparing the application for production - like the final preparation of a rocket before launch to Mars.

Build Process

1# Development
2npm run dev
3
4# Build for production
5npm run build
6
7# Preview production build
8npm run preview

Vite Build Output

1dist/
2├── index.html
3├── assets/
4│   ├── index-[hash].js      # Main bundle
5│   ├── index-[hash].css     # Main styles
6│   ├── vendor-[hash].js     # Dependencies
7│   └── [name]-[hash].js     # Lazy chunks

Build Configuration

1// vite.config.js
2import { defineConfig } from 'vite'
3import vue from '@vitejs/plugin-vue'
4
5export default defineConfig({
6  plugins: [vue()],
7
8  build: {
9    // Output directory
10    outDir: 'dist',
11
12    // Assets directory
13    assetsDir: 'assets',
14
15    // Inline small assets
16    assetsInlineLimit: 4096,
17
18    // CSS code splitting
19    cssCodeSplit: true,
20
21    // Source maps
22    sourcemap: false,
23
24    // Minification
25    minify: 'terser',
26
27    // Terser options
28    terserOptions: {
29      compress: {
30        drop_console: true,
31        drop_debugger: true
32      }
33    },
34
35    // Rollup options
36    rollupOptions: {
37      output: {
38        manualChunks: {
39          vendor: ['vue', 'vue-router', 'pinia'],
40          utils: ['@vueuse/core']
41        }
42      }
43    },
44
45    // Chunk size warning limit
46    chunkSizeWarningLimit: 500
47  }
48})

Environment Variables

1# .env
2VITE_API_URL=http://localhost:3000
3
4# .env.production
5VITE_API_URL=https://api.production.com
6
7# .env.staging
8VITE_API_URL=https://api.staging.com

1// Usage in code
2const apiUrl = import.meta.env.VITE_API_URL
3
4console.log(import.meta.env.MODE) // 'development' | 'production'
5console.log(import.meta.env.DEV)  // boolean
6console.log(import.meta.env.PROD) // boolean

Image Optimization

1npm install -D vite-plugin-image-optimizer

1// vite.config.js
2import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'
3
4export default defineConfig({
5  plugins: [
6    vue(),
7    ViteImageOptimizer({
8      jpg: { quality: 80 },
9      png: { quality: 80 },
10      webp: { quality: 80 }
11    })
12  ]
13})

Bundle Analysis

1npm install -D rollup-plugin-visualizer

1// vite.config.js
2import { visualizer } from 'rollup-plugin-visualizer'
3
4export default defineConfig({
5  plugins: [
6    vue(),
7    visualizer({
8      open: true,
9      gzipSize: true,
10      brotliSize: true
11    })
12  ]
13})

Performance Budget

1// vite.config.js
2export default defineConfig({
3  build: {
4    rollupOptions: {
5      output: {
6        manualChunks(id) {
7          // Split vendor code
8          if (id.includes('node_modules')) {
9            return 'vendor'
10          }
11
12          // Split large libraries
13          if (id.includes('@vueuse')) {
14            return 'vueuse'
15          }
16        }
17      }
18    }
19  }
20})