Production Build Optimization and Asset Compression0%
Dockerizing React Applications with Multi-Stage Builds

Production Build Optimization and Asset Compression

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Production Build Optimization and Asset Compression

Shipping a React application to production without build-time optimization leads to sluggish performance, poor Google Core Web Vitals, and wasted cloud CDN bandwidth. Enterprise production engineering requires minification, dead code elimination (tree-shaking), Brotli & Gzip compression, modern format conversion (WebP/AVIF), and immutable cache header strategies.

1. The Production Optimization Pipeline

Output
TypeScript Source Code ──► Minification (Terser / esbuild)
──► Tree-shaking (Rollup / Webpack)
──► Asset Hashing (app.[contenthash].js)
──► Pre-compression (Brotli .br & Gzip .gz)
──► Upload to Edge CDN with Cache-Control: max-age=31536000, immutable

2. Advanced Vite Optimization (vite.config.ts)

TypeScript
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import compression from "vite-plugin-compression";
 
export default defineConfig({
plugins: [
react(),
// Generate .gz assets
compression({ algorithm: "gzip", ext: ".gz" }),
// Generate .br (Brotli) assets - achieves ~15-20% better compression than gzip!
compression({ algorithm: "brotliCompress", ext: ".br" }),
],
build: {
target: "es2020", // Modern JS target produces significantly smaller output than es5
minify: "esbuild", // Fast and efficient minification
sourcemap: false, // Omit sourcemaps from public production output for security
rollupOptions: {
output: {
// Enforce content-hashed filenames for immutable caching
entryFileNames: "assets/[name].[hash].js",
chunkFileNames: "assets/[name].[hash].js",
assetFileNames: "assets/[name].[hash].[ext]",
manualChunks: {
vendor: ["react", "react-dom", "react-router-dom"],
},
},
},
},
});

3. Brotli vs Gzip Compression

  • Gzip (RFC 1952): Standard compression supported by 100% of browsers.
  • Brotli (RFC 7932): Modern compression algorithm developed by Google specifically for web assets. Yields 15% to 25% smaller JavaScript and CSS files compared to Gzip at equivalent decompression speeds.

Pre-compressing assets at build time (.br files) ensures your origin server or CDN serves compressed files instantly without spending CPU cycles compressing files dynamically on each request.

4. Immutable Cache-Control Headers

Because bundlers generate unique cryptographic hashes in output filenames (main.c3f81a.js), the file contents will never change. If you deploy new code, the filename hash changes!

Output
# For Hashed Static Assets (/assets/*.js, /assets/*.css, /assets/*.png):
Cache-Control: public, max-age=31536000, immutable
 
# For index.html (MUST NEVER BE IMMUTABLY CACHED):
Cache-Control: no-cache, no-store, must-revalidate
  • max-age=31536000, immutable: Informs browsers and CDN edge nodes to cache the file for 1 full year without ever revalidating.
  • index.html (no-cache): Ensures that when you redeploy, users immediately fetch the new index.html, which points to the newly hashed assets.

5. Verifying Asset Weight via Lighthouse & Core Web Vitals

Audit your production builds using Google Lighthouse:

  • First Contentful Paint (FCP): < 1.8 seconds.
  • Largest Contentful Paint (LCP): < 2.5 seconds.
  • Cumulative Layout Shift (CLS): < 0.1.
  • Total Blocking Time (TBT): < 200 ms.
Interactive Quiz

Practice Quiz

Question 1
Why does Brotli compression consistently outperform Gzip for web assets?
Question 2
Why should index.html NEVER be cached with Cache-Control: max-age=31536000, immutable?
Question 3
What does the immutable directive in a Cache-Control header communicate to the browser?
Question 4
Why is targeting modern ECMAScript (e.g. target: "es2020") beneficial over compiling down to ES5?
Question 5
Why should sourcemaps (sourcemap: false) typically be omitted from public production CDN releases?
Next Lesson

Dockerizing React Applications with Multi-Stage Builds

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Cross-Application State Sharing and Event BusesDockerizing React Applications with Multi-Stage Builds

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext