Vite config to keep chunks under 14kB, inspired by https://endtimes.dev/why-your-website-should-be-under-14kb-in-size/. Uses Brotli compression, aggressive minification, and manual chunking to optimize for TCP slow start, reducing load times. Ideal for fast, lightweight websites.

vite.config.js

// vite.config.js - Optimized for <14kB chunks per https://endtimes.dev/why-your-website-should-be-under-14kb-in-size/
// Aligns with TCP slow start to minimize latency; use Brotli for ~50kB uncompressed in 14kB delivered.
// Install: npm install vite-plugin-compression --save-dev

import { defineConfig } from 'vite';
import compression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    compression({
      algorithm: 'brotliCompress', // Superior compression for static assets
      threshold: 1024, // Compress files >1kB
    }),
  ],
  build: {
    chunkSizeWarningLimit: 14, // Warn if any chunk >14kB uncompressed
    minify: 'terser', // Aggressive minification
    terserOptions: {
      compress: {
        drop_console: true, // Remove console logs
        pure_funcs: ['console.log'],
      },
    },
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          if (id.includes('node_modules')) return 'vendor'; // Split vendors; refine further if needed
          if (id.includes('src/components')) return 'components'; // UI chunks
          if (id.includes('src/utils')) return 'utils'; // Utility chunks
          // Expand as needed, e.g., for pages/routes
        },
        chunkFileNames: 'chunks/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]',
        inlineDynamicImports: false,
      },
    },
    sourcemap: false, // Disable in prod for smaller sizes
  },
});

// Tips: Use dynamic imports for lazy-loading. Audit deps to remove bloat. Test with `vite build` and Lighthouse.