Bundling Frontend

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