How to Cure Your JavaScript Hangover: Practical Front‑End Performance Fixes

This Isn't Your Fault

When a site is completely rebuilt and the new JavaScript slows down the product, blame falls on the “JavaScript hangover”. The article explains why the problem occurs and how to mitigate it.

Catch the Perpetrators

Tree Shaking

Ensure your toolchain supports tree shaking (webpack, Rollup, Parcel). It only works with ES6 modules and requires @babel/preset-env with modules:false. Avoid bundlers that don’t generate a dependency graph (Grunt, Gulp) or manually audit unused code.

Code Splitting

Split common code at entry points and lazy‑load features that can be loaded on demand. Tools like Bundle Buddy can reveal duplicate bundles. Use rel="prefetch" for low‑priority scripts and be careful with async when order matters.

Externalizing Third‑Party Code

Self‑host dependencies whenever possible; otherwise mark them as external in the bundler or use dns-prefetch, preconnect, or preload to reduce interaction time and speed index.

Smaller Choices, Less Overhead

Prefer tiny alternatives (Preact instead of React, Luxon or date‑fns instead of Moment, native ES6 methods instead of Lodash) and remove unused libraries.

Differential Script Serving

Generate two bundles: a modern ES6 module bundle for up‑to‑date browsers and a legacy bundle for older browsers. A small runtime script can detect nomodule support and inject the appropriate bundle.

Less Transformation

Babel adds size when it transpiles default parameters, rest/spread, arrow functions, etc. Use @babel/runtime instead of helper injection, enable useBuiltIns:"usage", or apply loose transforms to shrink output. Consider avoiding Babel for modern‑only builds.

Progress Is Not a Race

Slow down iteration speed slightly to improve user experience. Continuous, measured improvements—metrics, testing, repeatable processes—lead to a faster, more stable site over time.

References

Tree shaking – MDN

Webpack – webpack.js.org

Rollup – rollupjs.org

Bundle Buddy – github.com/samccone/bundle‑buddy

Preact – preactjs.com

… (other references omitted for brevity)