Comparison: Vite 6 vs. Webpack 6 vs. Esbuild 0.20 for Modern Web App Build Time and HMR Speed

// vite.config.js - Vite 6 configuration for 100k LOC React SPA\n// Imports: Vite core, React plugin, Node utilities\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport path from 'path';\nimport { loadEnv } from 'vite';\n\n// Wrap config in defineConfig for type safety and autocomplete\nexport default defineConfig(({ mode }) => {\n  // Load environment variables from .env files, prefix with VITE_\n  const env = loadEnv(mode, process.cwd(), 'VITE_');\n\n  // Validate required environment variables\n  if (!env.VITE_API_BASE_URL) {\n    throw new Error('Missing required env var: VITE_API_BASE_URL');\n  }\n\n  return {\n    // Project root directory\n    root: process.cwd(),\n    // Base public path (for CDN deployments)\n    base: env.VITE_CDN_URL ? `${env.VITE_CDN_URL}/` : '/',\n    // Plugins array: React fast refresh, custom error plugin\n    plugins: [\n      react({\n        // Enable React fast refresh for HMR\n        fastRefresh: true,\n        // Babel config for legacy browser support\n        babel: {\n          presets: ['@babel/preset-env'],\n          plugins: ['@babel/plugin-transform-runtime'],\n        },\n      }),\n      // Custom plugin to handle 404s for SPA routing\n      {\n        name: 'spa-fallback',\n        configureServer(server) {\n          server.middlewares.use((req, res, next) => {\n            // If request is for a non-static file, serve index.html\n            if (!req.url.includes('.') && req.url !== '/') {\n              req.url = '/index.html';\n            }\n            next();\n          });\n        },\n      },\n    ],\n    // Resolve aliases for cleaner imports\n    resolve: {\n      alias: {\n        '@': path.resolve(__dirname, 'src'),\n        '@components': path.resolve(__dirname, 'src/components'),\n        '@utils': path.resolve(__dirname, 'src/utils'),\n      },\n    },\n    // Build configuration\n    build: {\n      // Output directory\n      outDir: 'dist',\n      // Enable sourcemaps for production\n      sourcemap: mode === 'production',\n      // Rollup options for advanced bundling\n      rollupOptions: {\n        input: 'index.html',\n        output: {\n          // Code splitting: chunk vendor libraries\n          manualChunks: {\n            vendor: ['react', 'react-dom', 'axios'],\n            ui: ['@mui/material', '@emotion/react'],\n          },\n        },\n      },\n      // Minify with esbuild for faster builds\n      minify: 'esbuild',\n    },\n    // Server configuration for HMR\n    server: {\n      port: 3000,\n      open: true,\n      // Proxy API requests to backend\n      proxy: {\n        '/api': {\n          target: env.VITE_API_BASE_URL,\n          changeOrigin: true,\n          rewrite: (path) => path.replace(/^\/api/, ''),\n          // Error handling for proxy failures\n          configure: (proxy, options) => {\n            proxy.on('error', (err, req, res) => {\n              console.error('Proxy error:', err);\n              res.writeHead(500, { 'Content-Type': 'application/json' });\n              res.end(JSON.stringify({ error: 'API proxy failed' }));\n            });\n          },\n        },\n      },\n    },\n  };\n});\n

// webpack.config.js - Webpack 6 configuration for 100k LOC React SPA\n// Imports: Webpack core, plugins, Node utilities\nconst path = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');\nconst ESLintPlugin = require('eslint-webpack-plugin');\nconst Dotenv = require('dotenv-webpack');\nconst { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');\n\n// Environment variables\nconst isProduction = process.env.NODE_ENV === 'production';\nconst isDevelopment = !isProduction;\n\n// Validate required env vars\nif (!process.env.VITE_API_BASE_URL) {\n  throw new Error('Missing required env var: VITE_API_BASE_URL');\n}\n\nmodule.exports = {\n  // Entry point for the app\n  entry: path.resolve(__dirname, 'src', 'index.jsx'),\n  // Output configuration\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: isProduction ? '[name].[contenthash].js' : '[name].js',\n    publicPath: process.env.VITE_CDN_URL ? `${process.env.VITE_CDN_URL}/` : '/',\n    clean: true, // Clean dist folder before each build\n  },\n  // Mode: development or production\n  mode: isDevelopment ? 'development' : 'production',\n  // Module rules for processing files\n  module: {\n    rules: [\n      // Babel loader for JS/JSX files\n      {\n        test: /\.(js|jsx)$/,\n        exclude: /node_modules/,\n        use: {\n          loader: 'babel-loader',\n          options: {\n            presets: ['@babel/preset-env', '@babel/preset-react'],\n            plugins: [\n              isDevelopment && 'react-refresh/babel',\n              '@babel/plugin-transform-runtime',\n            ].filter(Boolean),\n          },\n        },\n      },\n      // CSS loader for CSS files\n      {\n        test: /\.css$/,\n        use: ['style-loader', 'css-loader', 'postcss-loader'],\n      },\n      // Asset loader for images, fonts, etc.\n      {\n        test: /\.(png|svg|jpg|jpeg|gif|woff2|woff|eot|ttf)$/,\n        type: 'asset/resource',\n        generator: {\n          filename: 'assets/[hash][ext][query]',\n        },\n      },\n    ],\n  },\n  // Resolve aliases and extensions\n  resolve: {\n    extensions: ['.js', '.jsx', '.json'],\n    alias: {\n      '@': path.resolve(__dirname, 'src'),\n      '@components': path.resolve(__dirname, 'src/components'),\n      '@utils': path.resolve(__dirname, 'src/utils'),\n    },\n  },\n  // Plugins array\n  plugins: [\n    // Generate HTML file with injected scripts\n    new HtmlWebpackPlugin({\n      template: path.resolve(__dirname, 'public', 'index.html'),\n      favicon: path.resolve(__dirname, 'public', 'favicon.ico'),\n    }),\n    // Load environment variables from .env files\n    new Dotenv({\n      prefix: 'VITE_',\n      systemvars: true,\n    }),\n    // ESLint plugin for code quality\n    new ESLintPlugin({\n      extensions: ['js', 'jsx'],\n      fix: true,\n    }),\n    // React refresh for HMR in development\n    isDevelopment && new ReactRefreshWebpackPlugin(),\n    // Bundle analyzer for production builds (only when ANALYZE=true)\n    isProduction &&\n      process.env.ANALYZE === 'true' &&\n      new BundleAnalyzerPlugin(),\n  ].filter(Boolean),\n  // Development server configuration for HMR\n  devServer: {\n    port: 3000,\n    open: true,\n    hot: true, // Enable HMR\n    historyApiFallback: true, // SPA fallback for 404s\n    // Proxy API requests to backend\n    proxy: {\n      '/api': {\n        target: process.env.VITE_API_BASE_URL,\n        changeOrigin: true,\n        pathRewrite: { '^/api': '' },\n        // Error handling for proxy\n        onError: (err, req, res) => {\n          console.error('Webpack proxy error:', err);\n          res.status(500).json({ error: 'API proxy failed' });\n        },\n      },\n    },\n  },\n  // Optimization configuration\n  optimization: {\n    splitChunks: {\n      chunks: 'all',\n      cacheGroups: {\n        vendor: {\n          test: /[\\/]node_modules[\\/]/,\n          name: 'vendors',\n          chunks: 'all',\n        },\n      },\n    },\n  },\n};\n

// esbuild.config.js - Esbuild 0.20 configuration for 100k LOC React SPA\n// Imports: esbuild core, React refresh plugin, Node utilities\nconst esbuild = require('esbuild');\nconst reactRefreshPlugin = require('esbuild-plugin-react-refresh');\nconst fs = require('fs');\nconst path = require('path');\nconst dotenv = require('dotenv');\n\n// Load environment variables\nconst env = dotenv.config({ prefix: 'VITE_' }).parsed || {};\nconst isDevelopment = process.env.NODE_ENV !== 'production';\n\n// Validate required env vars\nif (!env.VITE_API_BASE_URL) {\n  throw new Error('Missing required env var: VITE_API_BASE_URL');\n}\n\n// Define build options shared between dev and prod\nconst getBuildOptions = () => ({\n  entryPoints: [path.resolve(__dirname, 'src', 'index.jsx')],\n  bundle: true,\n  outdir: path.resolve(__dirname, 'dist'),\n  platform: 'browser',\n  format: 'esm', // Output ESM modules by default\n  jsx: 'automatic', // React 17+ JSX transform\n  sourcemap: isDevelopment ? 'inline' : true,\n  minify: !isDevelopment,\n  splitting: true, // Enable code splitting\n  chunkNames: 'chunks/[name]-[hash]',\n  // Define environment variables for the browser\n  define: Object.entries(env).reduce((acc, [key, value]) => {\n    acc[`process.env.${key}`] = JSON.stringify(value);\n    return acc;\n  }, {}),\n  // Resolve aliases\n  alias: {\n    '@': path.resolve(__dirname, 'src'),\n    '@components': path.resolve(__dirname, 'src/components'),\n    '@utils': path.resolve(__dirname, 'src/utils'),\n  },\n  // Plugins: React refresh for HMR (dev only), custom error plugin\n  plugins: [\n    isDevelopment && reactRefreshPlugin(),\n    // Custom plugin to copy public folder to dist\n    {\n      name: 'copy-public-folder',\n      setup(build) {\n        build.onEnd(() => {\n          const publicDir = path.resolve(__dirname, 'public');\n          const distDir = path.resolve(__dirname, 'dist');\n          if (fs.existsSync(publicDir)) {\n            fs.cpSync(publicDir, distDir, { recursive: true });\n          }\n        });\n      },\n    },\n  ].filter(Boolean),\n  // Log level for errors\n  logLevel: 'error',\n  // Error handling callback\n  onRebuild: (error, result) => {\n    if (error) {\n      console.error('Esbuild rebuild error:', error);\n    } else {\n      console.log('Esbuild rebuild succeeded:', result);\n    }\n  },\n});\n\n// Start dev server with HMR if in development mode\nif (isDevelopment) {\n  (async () => {\n    try {\n      const ctx = await esbuild.context({\n        ...getBuildOptions(),\n        // Serve options for dev server\n        serve: {\n          port: 3000,\n          host: 'localhost',\n          // Proxy API requests to backend (esbuild has no native proxy, use custom middleware)\n          async onRequest(req, res) {\n            if (req.url.startsWith('/api')) {\n              const axios = require('axios');\n              try {\n                const response = await axios({\n                  method: req.method,\n                  url: `${env.VITE_API_BASE_URL}${req.url.replace('/api', '')}`,\n                  data: req.body,\n                  headers: { ...req.headers, host: new URL(env.VITE_API_BASE_URL).host },\n                });\n                res.writeHead(response.status, response.headers);\n                res.end(JSON.stringify(response.data));\n              } catch (err) {\n                console.error('Esbuild proxy error:', err);\n                res.writeHead(500, { 'Content-Type': 'application/json' });\n                res.end(JSON.stringify({ error: 'API proxy failed' }));\n              }\n            }\n          },\n        },\n      });\n      await ctx.watch();\n      console.log('Esbuild dev server running on http://localhost:3000');\n    } catch (error) {\n      console.error('Failed to start esbuild dev server:', error);\n      process.exit(1);\n    }\n  })();\n} else {\n  // Run production build\n  (async () => {\n    try {\n      const result = await esbuild.build(getBuildOptions());\n      console.log('Esbuild production build succeeded:', result);\n    } catch (error) {\n      console.error('Esbuild production build failed:', error);\n      process.exit(1);\n    }\n  })();\n}\n

// vite.config.js snippet for monorepo HMR optimization\nexport default defineConfig({\n  optimizeDeps: {\n    // Exclude internal monorepo packages from pre-bundling\n    exclude: ['@company/ui', '@company/utils', '@company/api-client'],\n    // Force include large external dependencies to avoid re-pre-bundling\n    include: ['lodash-es', 'date-fns'],\n  },\n  plugins: [monorepoPlugin()],\n});

// webpack.config.js snippet for persistent caching\nmodule.exports = {\n  cache: {\n    type: 'filesystem',\n    cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/webpack'),\n    buildDependencies: {\n      config: [__filename], // Invalidate cache when config changes\n    },\n    maxAge: 3600000, // 1 hour cache lifetime\n  },\n  module: {\n    rules: [\n      {\n        test: /\.js$/,\n        use: [\n          'thread-loader', // Parallel transformation\n          'babel-loader',\n        ],\n      },\n    ],\n  },\n};\n

// esbuild library build snippet\nconst esbuild = require('esbuild');\nesbuild.build({\n  entryPoints: ['src/index.ts'],\n  outfile: 'dist/index.js',\n  bundle: true,\n  format: 'esm',\n  minify: true,\n  sourcemap: true,\n  packages: 'external', // Exclude peer deps\n  platform: 'neutral', // Works in Node and browser\n  tsconfig: 'tsconfig.json',\n});\n