Performance & Optimization

Vite Optimization

Advanced Vite build optimization.

Build Optimization

Chunk size warnings
build: {
  chunkSizeWarningLimit: 1000
}

Manual chunks
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: [react, react-dom],
        utils: [./src/utils]
      }
    }
  }
}

Code Splitting

Dynamic imports
const Component = lazy(() => import(./Component));

Route-based splitting
const Home = lazy(() => import(./pages/Home));
const About = lazy(() => import(./pages/About));

With Suspense
 fallback={Loading...
}>

Asset Handling

Public directory
public/ // served at root
public/logo.png → /logo.png

Import assets
import logo from ./assets/logo.png
// Returns: /assets/logo.a3b2c1d4.png

URL imports
import workerUrl from ./worker?url
import shaderString from ./shader.glsl?raw

Environment Variables

.env file
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

Access in code
const apiUrl = import.meta.env.VITE_API_URL;

Built-in variables
import.meta.env.MODE // development/production
import.meta.env.DEV // boolean
import.meta.env.PROD // boolean