Skip to main content

​
Overview

The SAAC Frontend project uses Vite as its build tool to compile and bundle your React application for production. The build process optimizes your code for performance, including minification, tree-shaking, and asset optimization.

​
Build Command

To build your application for production, run: 
npm run build
This command executes the build script defined in package.json:
package.json
{
  "scripts": {
    "build": "tsc -b && vite build"
  }
}

​
Build Process

The build process consists of two main steps:
1

TypeScript Compilation

The tsc -b command performs a TypeScript build using project references, type-checking your code without emitting JavaScript files (since Vite handles the actual compilation).Configuration:
  • Target: ES2022
  • Module: ESNext
  • Strict mode enabled
  • JSX: react-jsx
The TypeScript compiler validates your code against the configuration in tsconfig.app.json, ensuring type safety before the build continues.
2

Vite Build

After TypeScript validation, Vite bundles your application using Rollup under the hood. This process includes:
  • Code splitting: Automatic chunk splitting for better caching
  • Minification: Removes whitespace and shortens variable names
  • Tree-shaking: Eliminates unused code from the final bundle
  • Asset optimization: Processes and optimizes images, fonts, and other static assets
  • CSS processing: Compiles and optimizes Tailwind CSS

​
Build Output

The build process generates a dist/ directory containing your production-ready application: 
dist/
├── index.html          # Entry HTML file
├── assets/
│   ├── index-[hash].js    # Main application bundle
│   ├── index-[hash].css   # Compiled styles
│   └── [asset]-[hash].*   # Other optimized assets
└── vite.svg            # Static assets
The [hash] in filenames is a content-based hash that changes when the file content changes. This enables long-term caching strategies.

​
Build Optimizations

​
Minification

Vite automatically minifies JavaScript and CSS in production builds using esbuild (for JS) and cssnano (for CSS). This reduces file sizes significantly:
  • Removes comments and whitespace
  • Shortens variable names
  • Optimizes code structure

​
Tree-Shaking

Unused code is automatically removed from the final bundle. This works for:
  • ES modules imports
  • Unused React components
  • Unused utility functions
  • Unused CSS (via Tailwind’s purge)
import { functionA, functionB, functionC } from './utils';

// Only functionA is used
export default function App() {
  return functionA();
}

​
Code Splitting

Vite automatically splits your code into smaller chunks:
  • Vendor splitting: Third-party dependencies (React, etc.) are bundled separately
  • Dynamic imports: Routes loaded with import() create separate chunks
  • Manual chunks: You can configure custom chunk splitting in vite.config.ts

​
Production vs Development Builds

Development Build

  • Fast rebuilds
  • Source maps enabled
  • No minification
  • Development warnings
  • Hot Module Replacement (HMR)

Production Build

  • Optimized for size
  • Minified code
  • Tree-shaking applied
  • No development warnings
  • Content-hashed filenames

​
Build Configuration

The build is configured in vite.config.ts:
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})
Plugins used:
  • @vitejs/plugin-react-swc: Fast React refresh using SWC compiler
  • @tailwindcss/vite: Tailwind CSS v4 integration

​
Verifying the Build

After building, you can:
  1. Check bundle size: Look at the terminal output for asset sizes
  2. Analyze the dist/ directory: Inspect generated files
  3. Test locally: Use npm run preview to serve the production build
Always test your production build locally using npm run preview before deploying to ensure everything works correctly.

​
Troubleshooting

​
Build Fails with TypeScript Errors

If tsc -b fails, fix TypeScript errors in your code. Run tsc --noEmit to check for type errors without building.

​
Large Bundle Sizes

  • Check for duplicate dependencies
  • Use dynamic imports for large components
  • Analyze bundle with vite-plugin-visualizer

​
Missing Assets

Ensure assets are imported correctly: 
// Correct - Vite processes the import
import logo from './assets/logo.svg'

// Incorrect - Won't be included in build
<img src="./assets/logo.svg" />

​
Next Steps

Preview Build

Test your production build locally

Deploy to Production

Deploy your built application

Build docs developers (and LLMs) love

Get started for freeTalk to us