Frontend Scalability Implementation Patterns

// webpack.config.js
module.exports = {
  entry: {
    app: './src/index.js',
  },
  
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        // Vendor chunk: node_modules
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          priority: 10,
          reuseExistingChunk: true
        },
        
        // React/ReactDOM separate chunk
        react: {
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
          name: 'react',
          priority: 20
        },
        
        // Common chunks shared by 2+ modules
        common: {
          minChunks: 2,
          priority: 5,
          reuseExistingChunk: true,
          enforce: true
        }
      },
      
      // Chunk size limits
      maxSize: 244000, // 244KB
      minSize: 20000,  // 20KB
    },
    
    // Runtime chunk for webpack module loading logic
    runtimeChunk: {
      name: 'runtime'
    },
    
    // Minimize bundles
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true
          }
        }
      })
    ]
  },
  
  plugins: [
    // Extract CSS
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:8].css',
      chunkFilename: '[name].[contenthash:8].chunk.css'
    }),
    
    // Bundle analyzer
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false
    })
  ]
};

// package.json - Mark side effects
{
  "name": "my-library",
  "version": "1.0.0",
  "sideEffects": [
    "*.css",
    "*.scss",
    "./src/polyfills.js"
  ]
  // Or false if no side effects
  // "sideEffects": false
}

// babel.config.js - Preserve ES modules
module.exports = {
  presets: [
    ['@babel/preset-env', {
      modules: false, // Don't transpile modules
      targets: { esmodules: true }
    }]
  ]
};

// Library: Use named exports
// ❌ Bad: Default export
export default {
  add,
  subtract,
  multiply,
  divide
};

// ✅ Good: Named exports
export { add };
export { subtract };
export { multiply };
export { divide };

// Consumer: Import only what's needed
// ❌ Bad: Entire library imported
import math from 'math-library';
math.add(1, 2);

// ✅ Good: Tree-shakeable
import { add } from 'math-library';
add(1, 2);

// webpack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true, // Mark unused exports
    minimize: true,
    sideEffects: true, // Read package.json sideEffects
    
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            unused: true,
            dead_code: true
          }
        }
      })
    ]
  }
};

// Lodash tree shaking
// ❌ Bad: Imports entire library
import _ from 'lodash';
_.debounce(fn, 300);

// ✅ Good: Import specific module
import debounce from 'lodash/debounce';
// Or use lodash-es (ES module version)
import { debounce } from 'lodash-es';

// webpack.config.js - Content hashing
module.exports = {
  output: {
    filename: '[name].[contenthash:8].js',
    chunkFilename: '[name].[contenthash:8].chunk.js',
    assetModuleFilename: 'assets/[name].[contenthash:8][ext]',
    publicPath: 'https://cdn.example.com/'
  }
};

// CloudFront Cache Behaviors
{
  "CacheBehaviors": [
    {
      "PathPattern": "*.js",
      "ViewerProtocolPolicy": "redirect-to-https",
      "CachePolicyId": "658327ea-f89d-4fab-a63d-7e88639e58f6",
      "Compress": true,
      "AllowedMethods": ["GET", "HEAD", "OPTIONS"],
      "CachedMethods": ["GET", "HEAD"]
    },
    {
      "PathPattern": "*.css",
      "CachePolicyId": "658327ea-f89d-4fab-a63d-7e88639e58f6",
      "Compress": true
    }
  ]
}

// Cache-Control headers
// Long-term cache for hashed assets
Cache-Control: public, max-age=31536000, immutable

// Short cache for HTML
Cache-Control: public, max-age=0, must-revalidate

// Nginx configuration
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
  add_header X-Content-Type-Options "nosniff";
  
  # Gzip compression
  gzip on;
  gzip_types text/css application/javascript image/svg+xml;
  gzip_min_length 1000;
  
  # Brotli (if module enabled)
  brotli on;
  brotli_types text/css application/javascript;
}

// S3 + CloudFront deployment
aws s3 sync ./dist s3://my-bucket \
  --cache-control "public,max-age=31536000,immutable" \
  --exclude "*.html"

aws s3 sync ./dist s3://my-bucket \
  --cache-control "public,max-age=0,must-revalidate" \
  --exclude "*" \
  --include "*.html"

// Invalidate CloudFront cache
aws cloudfront create-invalidation \
  --distribution-id E1234567890 \
  --paths "/index.html" "/*.html"

// service-worker.js - Manual implementation
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1-static').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/app.js',
        '/logo.png'
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  const { request } = event;
  
  // Cache-first for static assets
  if (request.url.includes('/static/')) {
    event.respondWith(
      caches.match(request).then((cached) => {
        return cached || fetch(request).then((response) => {
          return caches.open('v1-static').then((cache) => {
            cache.put(request, response.clone());
            return response;
          });
        });
      })
    );
  }
  
  // Network-first for API
  else if (request.url.includes('/api/')) {
    event.respondWith(
      fetch(request)
        .then((response) => {
          const clone = response.clone();
          caches.open('v1-api').then((cache) => {
            cache.put(request, clone);
          });
          return response;
        })
        .catch(() => caches.match(request))
    );
  }
});

// Workbox implementation
import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

// Precache build assets
precacheAndRoute(self.__WB_MANIFEST);

// Cache images - Cache First
registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
      })
    ]
  })
);

// Cache API - Network First
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst({
    cacheName: 'api-cache',
    networkTimeoutSeconds: 3,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200]
      }),
      new ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 5 * 60 // 5 minutes
      })
    ]
  })
);

// Stale While Revalidate for Google Fonts
registerRoute(
  ({ url }) => url.origin === 'https://fonts.googleapis.com',
  new StaleWhileRevalidate({
    cacheName: 'google-fonts-stylesheets'
  })
);

// webpack.config.js - Generate service worker
const { GenerateSW } = require('workbox-webpack-plugin');

module.exports = {
  plugins: [
    new GenerateSW({
      clientsClaim: true,
      skipWaiting: true,
      runtimeCaching: [
        {
          urlPattern: /^https:\/\/api\.example\.com/,
          handler: 'NetworkFirst',
          options: {
            cacheName: 'api-cache',
            expiration: { maxEntries: 50, maxAgeSeconds: 300 }
          }
        }
      ]
    })
  ]
};

// Container/Host Application
// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'container',
      remotes: {
        header: 'header@http://localhost:3001/remoteEntry.js',
        products: 'products@http://localhost:3002/remoteEntry.js',
        checkout: 'checkout@http://localhost:3003/remoteEntry.js'
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
        'react-router-dom': { singleton: true }
      }
    })
  ]
};

// Container App.js
import React, { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Header = lazy(() => import('header/Header'));
const Products = lazy(() => import('products/ProductList'));
const Checkout = lazy(() => import('checkout/CheckoutFlow'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/products/*" element={<Products />} />
          <Route path="/checkout/*" element={<Checkout />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

// Remote Micro-Frontend (Header)
// webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'header',
      filename: 'remoteEntry.js',
      exposes: {
        './Header': './src/components/Header'
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
};

// Single-SPA approach
import { registerApplication, start } from 'single-spa';

registerApplication({
  name: '@org/header',
  app: () => System.import('@org/header'),
  activeWhen: '/' // Always active
});

registerApplication({
  name: '@org/products',
  app: () => System.import('@org/products'),
  activeWhen: '/products'
});

start();

// Web Components approach
class ProductCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <div class="product-card">
        <h3>${this.getAttribute('name')}</h3>
        <p>${this.getAttribute('price')}</p>
      </div>
    `;
  }
}

customElements.define('product-card', ProductCard);

// Usage in any framework
<product-card name="Widget" price="29.99"></product-card>

// Error Boundary for Micro-Frontends
class MicroFrontendBoundary extends React.Component {
  state = { hasError: false, error: null };
  
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }
  
  componentDidCatch(error, errorInfo) {
    console.error('MFE Error:', error, errorInfo);
    // Log to error tracking
    logError(this.props.mfeName, error);
  }
  
  render() {
    if (this.state.hasError) {
      return (
        <div className="mfe-fallback">
          <h3>{this.props.mfeName} unavailable</h3>
          <button onClick={() => this.setState({ hasError: false })}>
            Retry
          </button>
        </div>
      );
    }
    
    return this.props.children;
  }
}

// Usage
<MicroFrontendBoundary mfeName="Header">
  <Suspense fallback={<HeaderSkeleton />}>
    <Header />
  </Suspense>
</MicroFrontendBoundary>

// Version fallback
const loadMicroFrontend = async (name, version = 'latest') => {
  try {
    return await import(`${name}@${version}/remoteEntry.js`);
  } catch (error) {
    console.warn(`Failed to load ${name}@${version}, trying v1`);
    return await import(`${name}@v1/remoteEntry.js`);
  }
};