Building

make build

# Build frontend
cd frontend
npm run build

# Build Go binary
cd ..
go build -o ./bin/server cmd/server/main.go

npm run build

dist/
├── index.html
├── assets/
│   ├── main.abc123.js       # Minified, hashed
│   ├── main.def456.css      # Minified, hashed
│   └── vendor.xyz789.js     # Code-split chunk
└── .vite/
    └── manifest.json        # Build manifest

//go:embed all:../../dist
var distFS embed.FS

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    outDir: '../dist',              // Output directory
    emptyOutDir: true,              // Clean before build
    sourcemap: false,               // Disable source maps in production
    minify: 'esbuild',              // Minification method
    target: 'es2015',               // Browser target

    rollupOptions: {
      output: {
        // Code splitting
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
          'router': ['react-router-dom'],
        },

        // Asset naming with hashes
        entryFileNames: 'assets/[name].[hash].js',
        chunkFileNames: 'assets/[name].[hash].js',
        assetFileNames: 'assets/[name].[hash].[ext]',
      },
    },

    // Size warning threshold
    chunkSizeWarningLimit: 1000,    // 1000 KB
  },
})

# .env.production
VITE_API_URL=https://api.production.com
VITE_ANALYTICS_ID=GA-123456

const apiUrl = import.meta.env.VITE_API_URL

// React
const About = lazy(() => import('./pages/About'))

// Vue
const About = defineAsyncComponent(() => import('./pages/About.vue'))

// ❌ Imports entire library
import _ from 'lodash'

// ✅ Imports only what's used
import { debounce } from 'lodash-es'

// Before
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0)
}

// After
const calculateTotal=e=>e.reduce((e,t)=>e+t.price,0)

# Install image optimizer
npm install -D vite-plugin-imagemin

# Add to vite.config.ts
import viteImagemin from 'vite-plugin-imagemin'

export default {
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 7 },
      optipng: { optimizationLevel: 7 },
      mozjpeg: { quality: 80 },
      svgo: { plugins: [{ removeViewBox: false }] },
      webp: { quality: 80 },
    }),
  ],
}

.env                 # All environments
.env.development     # Development only
.env.production      # Production only
.env.staging         # Staging only

{
  "scripts": {
    "build": "vite build",
    "build:staging": "vite build --mode staging",
    "build:production": "vite build --mode production"
  }
}

npm run build

# Output shows sizes
dist/assets/main.abc123.js        245.67 kB
dist/assets/vendor.xyz789.js      156.32 kB

npm install -D rollup-plugin-visualizer

import { visualizer } from 'rollup-plugin-visualizer'

export default {
  plugins: [
    visualizer({ filename: 'stats.html' })
  ]
}

# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Setup Go
        uses: actions/setup-go@v4
        with:
          go-version: '1.22'

      - name: Install dependencies
        run: cd frontend && npm ci

      - name: Build frontend
        run: cd frontend && npm run build

      - name: Build server
        run: go build -o ./bin/server cmd/server/main.go

      - name: Deploy
        run: ./deploy.sh

# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm install

# Clear Vite cache
rm -rf node_modules/.vite

// ❌ Won't be included
// <img src="/logo.png">

// ✅ Will be included
import logo from './logo.png'
// <img src={logo}>