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 sizeMinification
Compresses code and removes whitespace
-40% file sizeCSS Purging
Includes only used Tailwind classes
2.5MB → 45KBCode Splitting
Lazy loads routes and components
Faster initial loadCDN Ready
Static files with long cache headers
Global distributionPre-rendering
Static HTML for instant render
Better SEO & UXContinue Learning
Explore more framework features