Bundling Frontend

Goal

Produce a highly optimized, minified set of static assets (JS, CSS, images) ready for deployment to a CDN or static host, with optimal caching strategies.

When to Use

• •Setting up the build pipeline.
• •Optimizing application load time (LCP, TTI).
• •Configuring environment-specific build variables.

Instructions

1. Vite Configuration

Configure vite.config.ts for production builds.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  build: {
    target: 'esnext',
    sourcemap: false, // Disable for prod, enable for staging
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom', 'react-router-dom'],
          // Split heavy libs into their own chunks
        },
      },
    },
  },
});

2. Environment Variables

Use .env files for build-time configuration.

• •.env.development: API endpoints for local dev.
• •.env.production: API endpoints for prod.

Access them via import.meta.env.VITE_API_URL.

3. Asset Optimization

• •Images: Use modern formats (WebP/AVIF). Vite handles imports automatically.
• •Fonts: Self-host fonts when possible or use a performant CDN.
• •SVGs: Import as components using plugin like vite-plugin-svgr or strictly as URLs.

4. Build Scripts

Ensure package.json has standard scripts:

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview"
}

Always run tsc (TypeScript Compiler) before vite build to catch type errors that Vite (using esbuild) ignores.

Constraints

✅ Do

• •Prefix all public environment variables with VITE_.
• •Run type checking (tsc) before the build step.
• •Use manualChunks to split large vendor libraries if the main bundle exceeds 500kb.
• •Configure clean build output directories (emptyOutDir: true).
• •Use path aliases (@/components) to simplify imports and refactoring.

❌ Don't

• •DO NOT include secrets (private API keys) in client-side bundles. They are visible to everyone.
• •DO NOT rely on default browser caching for index.html; ensure the server sets Cache-Control: no-cache.
• •DO NOT leave sourcemap: true in production unless you have a private error reporting service.
• •DO NOT import unused heavy libraries (e.g., all of lodash). Import specific functions.

Output Format

• •dist/ folder containing index.html, assets/*.js, assets/*.css.
• •vite.config.ts configuration.

Dependencies

• •../scaffolding-frontend/SKILL.md