Deploying JavaScript Apps (CDN, Minification, Bundling)

// ===== Minification Demo =====
// Before minification (readable):
function calculateTotal(price, quantity) {
  const subtotal = price * quantity;
  const tax = subtotal * 0.1;
  return subtotal + tax;
}

// Let's test it!
const total = calculateTotal(100, 5);
console.log("Price: $100, Quantity: 5");
console.log("Total with 10% tax: $" + total);

// After minification (production), this becomes:
// function calculateTotal(e,t){const n=e*t;return n+.1*n}
// 
// Typical size reduction: 30-70% sma
...

// ===== Tree Shaking Demo =====
// Imagine we have a math utilities module:

// math.js exports these functions:
function add(a, b) { return a + b; }
function subtract(a, b) { return a - b; }
function multiply(a, b) { return a * b; }
function divide(a, b) { return a / b; }

// In our app, we only USE add():
const result = add(5, 3);
console.log("Using add(5, 3):", result);

// Tree Shaking Analysis:
console.log("\n📦 What happens in production build:");
console.log("✓ add() is INCLUDED (we use 
...

// ===== Code Splitting Demo =====

// Without code splitting:
// One huge bundle: app.js (500KB)
// User waits for EVERYTHING to load before seeing anything

// With code splitting - separate bundles:
const bundles = {
  "home.bundle.js": "50KB",
  "dashboard.bundle.js": "150KB", 
  "profile.bundle.js": "80KB",
  "charts.bundle.js": "200KB"
};

console.log("📦 Code-split bundles:");
Object.entries(bundles).forEach(([file, size]) => {
  console.log(`  ${file}: ${size}`);
});

// Dynamic import s
...

// ===== Hashing & Cache Busting Demo =====

// Production build creates hashed filenames:
const buildOutput = {
  files: [
    "app.8c1f19a.js",      // Hash changes when code changes
    "vendor.5a9e02d.js",   // Separate vendor bundle
    "styles.9fc3a44.css"   // CSS also hashed
  ]
};

console.log("📁 Production build output:");
buildOutput.files.forEach(file => console.log("  " + file));

// When you update your code:
console.log("\n🔄 After code update:");
console.log("  OLD: app.8c1f19a.
...

// ===== Vite Configuration Reference =====
// This is what vite.config.js looks like:

console.log("📄 vite.config.js structure:");
const viteConfig = {
  build: {
    minify: "terser",       // Use Terser for minification
    sourcemap: true,         // Generate source maps for debugging
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["lodash", "axios"]  // Split vendor code
        }
      }
    }
  }
};

console.log(JSON.stringify(viteConfig, null, 2));

conso
...

// ===== Webpack Configuration Reference =====
// This is what webpack.prod.js looks like:

console.log("📄 webpack.prod.js structure:");
const webpackConfig = {
  mode: "production",
  output: {
    filename: "js/[name].[contenthash].js",
    clean: true
  },
  optimization: {
    minimize: true,
    splitChunks: { chunks: "all" }
  },
  plugins: ["MiniCssExtractPlugin"]
};

console.log(JSON.stringify(webpackConfig, null, 2));

console.log("\n🔧 Key Webpack features:");
console.log("  ✔ Product
...

// ===== Cache-Control Headers Demo =====

console.log("📦 Cache-Control Headers Explained:\n");

// For hashed JS/CSS files (app.8c1f19a.js):
console.log("For HASHED files (app.8c1f19a.js):");
console.log("  Cache-Control: public, max-age=31536000, immutable");
console.log("  → Cache for 1 YEAR");
console.log("  → NEVER revalidate");
console.log("  → Hash guarantees uniqueness");
console.log("  → INSTANT load for returning visitors!");

// For HTML files (index.html):
console.log("\nFor HTML fi
...

// ===== CI/CD Pipeline Demo =====
// GitHub Actions automatically builds and deploys your app!

console.log("🔄 CI/CD Pipeline Steps:\n");

const pipelineSteps = [
  "1. Developer pushes code to 'main' branch",
  "2. GitHub Actions triggers workflow",
  "3. Checkout code from repository",
  "4. Setup Node.js environment",
  "5. Run: npm install",
  "6. Run: npm run build (creates optimized bundle)",
  "7. Deploy to CDN (Cloudflare, Vercel, etc.)",
  "8. App is live globally in seconds!"
];

pip
...

// ===== SPA Rewrite Rules Demo =====
// Without these rules, refreshing /dashboard gives 404!

console.log("🔧 SPA Rewrite Rules by Platform:\n");

const platforms = {
  "Netlify": "_redirects file: /*  /index.html  200",
  "Vercel": 'vercel.json: { "rewrites": [{ "source": "/(.*)", "destination": "/" }] }',
  "NGINX": "try_files $uri $uri/ /index.html;",
  "Apache": "RewriteRule ^ index.html [L]"
};

Object.entries(platforms).forEach(([platform, rule]) => {
  console.log(`${platform}:`);
  con
...

// ===== HTTP Security Headers Demo =====
// These headers protect your production app!

console.log("🔒 Essential Security Headers:\n");

const securityHeaders = [
  {
    header: "Content-Security-Policy",
    purpose: "Prevents XSS attacks",
    example: "default-src 'self'; script-src 'self'"
  },
  {
    header: "Strict-Transport-Security",
    purpose: "Forces HTTPS",
    example: "max-age=31536000; includeSubDomains"
  },
  {
    header: "X-Frame-Options",
    purpose: "Prevents clickjack
...