vwf .

Build & Optimization

Vite-powered optimization with tree-shaking, minification, and pre-rendering

Build Pipeline Flow

Source Files

4 items

Vite Processing

4 items

Tailwind Purge

3 items

Pre-rendering

3 items

Route Setup

3 items

Final Bundle

3 items

Build Optimization Impact

Before Optimization

CSS Size:2.5 MB
JS Size:450 KB
Total Bundle:2.95 MB
Load Time (3G):12+ seconds
Lighthouse Score:45

After Optimization

CSS Size:45 KB (-98%)
JS Size:135 KB (-70%)
Total Bundle:180 KB (-94%)
Load Time (3G):< 2 seconds
Lighthouse Score:95+

Build Script Example

#!/bin/bash
# Build process from build-auth.sh

# 1. Clean previous build
rm -rf dist

# 2. Run Vite build (tree-shaking + minification)
npm run build

# 3. Pre-render pages with van-plate
node scripts/pre-render.js

# 4. Copy index.html to route folders
for route in dashboard profile services; do
  mkdir -p dist/$route
  cp dist/index.html dist/$route/
done

# 5. Optimize assets
# - Set cache headers
# - Compress images
# - Generate service worker

echo "✅ Build complete: 180KB total"

Key Optimizations

Tree Shaking

Removes unused code automatically

-70% JS size

Minification

Compresses code and removes whitespace

-40% file size

CSS Purging

Includes only used Tailwind classes

2.5MB → 45KB

Code Splitting

Lazy loads routes and components

Faster initial load

CDN Ready

Static files with long cache headers

Global distribution

Pre-rendering

Static HTML for instant render

Better SEO & UX

Continue Learning

Explore more framework features