wsh-production-build

name	wsh-production-build
description	Webpack production mode, source map removal, minification, and optimization flags for WSH 2026. Covers mode, devtool, minimize, splitChunks, concatenateModules, usedExports, and Babel target modernization.

WSH: Production Build Configuration

Switching from development/none mode to production mode with proper optimization flags is the single highest-impact change for Lighthouse scores. It reduces bundle size dramatically through minification, tree shaking, and dead code elimination.

Use this skill when executing WSH commands related to webpack optimization, build mode, source maps, or minification.

Techniques

1. Webpack Mode → Production

// Before
mode: "none",

// After
mode: "production",

This enables built-in optimizations: DefinePlugin (process.env.NODE_ENV = "production"), module concatenation, and terser minification.

Impact: TBT -70%, SI -50%, FCP -30%

2. Remove Inline Source Maps

// Before
devtool: "inline-source-map",

// After
devtool: false,

Inline source maps embed the entire source map in the JS bundle. For a 108MB bundle, this could account for 40-60% of the file size.

Impact: Bundle size reduction ~50%, directly improves TBT, SI, FCP

3. Enable Optimization Flags

optimization: {
  minimize: true,
  splitChunks: { chunks: "all" },  // Keep false initially - separate command
  concatenateModules: true,
  usedExports: true,
  providedExports: true,
  sideEffects: true,
}

Note: splitChunks should be handled in a separate command (wsh-code-splitting) to keep changes atomic.

Impact: Further 20-40% bundle reduction from concatenation and dead export elimination

4. Babel Target Modernization

// Before
targets: "ie 11",
modules: "commonjs",

// After
targets: "last 2 Chrome versions, last 2 Firefox versions, last 2 Safari versions",
modules: false,  // Let webpack handle modules for tree shaking

• modules: false is CRITICAL — CommonJS prevents webpack tree shaking
• Modern targets eliminate unnecessary polyfills and transpilation (generators, async/await, etc.)
• Remove core-js and regenerator-runtime from webpack entry

Impact: TBT -30%, bundle size -15-25%

5. React Production Mode

// In babel.config.js
["@babel/preset-react", {
  development: false,  // was true
  runtime: "automatic",
}]

Disables React development warnings, propTypes checks, and extra validation.

Impact: Minor TBT improvement, ~5KB reduction

6. Build Script

// Before
"build": "NODE_ENV=development webpack"

// After
"build": "NODE_ENV=production webpack"

Pitfalls

Pitfall	Symptom	Fix
modules: "commonjs" left in babel	Tree shaking doesn't work, bundle still huge	Set modules: false
core-js entry still in webpack	Unnecessary polyfills bundled	Remove from entry array
React development mode left on	Extra warnings in console, larger bundle	Set development: false in preset-react
usedExports without sideEffects	Dead code not eliminated	Enable both flags together

VRT Risks

Change	Visual Impact	Mitigation
Production mode	None — only removes dev warnings	Safe, Low risk
Source map removal	None — source maps are invisible	Safe, Low risk
Minification	None — only whitespace/naming	Safe, Low risk
Babel target change	Possible if IE11-specific polyfills provided missing features	Test all pages, but modern browsers don't need these polyfills

Project-Specific Notes

• Build script in application/client/package.json uses NODE_ENV=development
• Webpack config at application/client/webpack.config.js
• Babel config at application/client/babel.config.js
• Entry includes core-js, regenerator-runtime/runtime, jquery-binarytransport — all unnecessary with modern targets
• Current bundle: 108MB (scripts/main.js)
• Expected after optimization: ~10-20MB (before dependency removal)