Master Front‑End Build Optimization: Priorities, Modules, and Performance Hacks

Build Optimization

22 Set Priorities

Start by inventorying all resources (JavaScript, images, fonts, third‑party scripts, heavy modules such as carousels, complex infographics, and media) and grouping them. Define a core experience for legacy browsers, an enhanced experience for modern browsers, and an extra experience for non‑essential, lazily‑loaded assets (e.g., web fonts, unnecessary styles, carousel scripts, video players, social buttons).

Optimize performance by loading the core experience first, then the enhanced experience, and finally the extra experience.

23 Use Native JavaScript Modules in Production

The "cut‑the‑mustard" technique sends core experience to legacy browsers and enhanced experience to modern browsers. Its updated version uses <script type="module"> and <script nomodule> (module/nomodule pattern).

Modern browsers treat the script as a module; older browsers ignore the unknown attribute. This reduces the amount of code sent to supporting browsers. Most frameworks and CLIs now support it. Rollup can output modules, Parcel 2 adds module support, while Webpack still lacks full support. Tools like Pika aim to simplify module management.

Note: Feature detection alone is insufficient; low‑end devices may still be mis‑identified. Using the client‑memory hint HTTP header (supported in Blink) or the Device Memory API can help target low‑end devices more reliably.

24 Are You Using Tree‑Shaking, Scope Hoisting, and Code‑Splitting?

Tree‑shaking removes unused code from the final bundle. Scope hoisting flattens import chains into inline functions. Webpack and Rollup also support JSON tree‑shaking.

Consider avoiding outdated and expensive styles, dynamically renaming CSS classes, and using preload-webpack-plugin to preload or prefetch split chunks via <link rel="preload"> or <link rel="prefetch">. Control preload priority with Webpack inline directives.

Identify split points by analyzing which CSS/JS chunks are used, e.g., with DevTools Code Coverage. If not using Webpack, Rollup’s output is generally smaller than Browserify’s. Plugins such as rollup-plugin-closure-compiler and rollupify can help reduce the cost of many small modules.

For single‑page apps, consider React performance debugging, Angular performance guides, and other techniques to reduce initial render time.

25 Can JavaScript Be Offloaded to a Web Worker?

Heavy JavaScript can be moved to a Web Worker or cached via a Service Worker to reduce main‑thread impact. DOM operations run on the main thread, so offloading expensive work improves UI responsiveness.

Surma’s guide on running JavaScript off the main thread. Workerize to move modules to a worker and expose functions as async proxies. workerize-loader and worker-plugin for Webpack integration.

Web Workers cannot access the DOM and must be loaded from separate files.

26 Can Frequent Functions Be Moved to WebAssembly?

Heavy computation can be offloaded to WebAssembly (WASM), a binary format compiled from C/C++/Rust. Browser support is strong, and JavaScript‑WASM calls are getting faster, making it viable for compute‑intensive web apps (e.g., web games).

Lin Clark’s WebAssembly article series.

Patrick Hamann’s talks on WebAssembly’s growing importance.

Google Codelabs introductory tutorial.

Alex Danilo’s Google I/O talk and Benedek Gagyi’s case studies.

Milica Mihajlija explains how WebAssembly works and why it is useful.

27 Are You Using Pre‑Compilation?

Use pre‑compilation to shift some client‑side rendering to the server, speeding up initial responses. Tools like Optimize.js can wrap high‑priority calls, though its relevance has decreased.

28 Serve Legacy Code Only to Legacy Browsers

With broad ES2015 support, use babel-preset-env to transpile only the parts unsupported by target browsers, producing separate ES6 and ES5 bundles. Modern browsers load the type="module" bundle, older browsers load the nomodule bundle. Webpack ESNext Boilerplate automates this.

Preload modules with <link rel="modulepreload">. Use babel-plugin-lodash to include only used Lodash modules, and replace generic require with per‑module imports to avoid duplication. Shubham Kanodia’s smart bundling guide offers detailed strategies.

29 Are You Using Module/Nomodule Differentiation?

Deploy two builds: one with Babel and polyfills for legacy browsers, and one without for modern browsers. This reduces script load and main‑thread blocking. Jeremy Wagner’s differential serving article explains the setup.

30 Incremental Decoupling of Legacy Code

Identify and rewrite outdated code incrementally. Track usage metrics, encourage deprecation, and use polyfills to bridge gaps.

31 Identify and Delete Unused CSS/JS

Chrome’s coverage tool shows which code is executed. Use import() to lazy‑load unused modules after detection. Puppeteer can programmatically collect coverage data, and tools like PurgeCSS, UnCSS, and Helium help remove dead CSS. Harry Roberts suggests using a 1×1 px transparent GIF as a dead‑CSS marker.

32 Trim JavaScript Package Size

Addy Osmani recommends only bundling needed parts of libraries. Replace large libraries (e.g., Moment.js) with lighter alternatives like the native Internationalization API, date-fns, or Luxon. Bundlephobia and size-limit help assess cost, and integrating with Lighthouse custom audits provides deeper insight.

Frameworks can be trimmed: Vue MDC adapter reduced from 194 KB to 10 KB; Svelte and Rawact Babel plugin compile components to native DOM operations for smaller bundles.

size-limit provides basic bundle size checks and detailed JavaScript execution time information.

Benedikt Rötsch shows that switching from Moment.js to date-fns can save ~300 ms on First Paint for 3G and low‑end devices.

33 Predictive Extraction of JavaScript Chunks

Use tools like Guess.js to predict which chunks users are likely to need next, based on analytics data, and preload them in Next.js, Angular, or React projects via a dedicated Webpack plugin.

Control prefetch volume to avoid unnecessary data transfer; libraries such as DNStradamus, Quicklink, and Instant.page automatically prefetch links when idle, respecting low‑bandwidth conditions.

References

https://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages

https://www.smashingmagazine.com/2014/09/improving-smashing-magazine-performance-case-study/

https://www.filamentgroup.com/lab/modernizing-delivery.html

https://snugug.com/musings/modern-cutting-the-mustard/

https://philipwalton.com/articles/using-native-javascript-modules-in-production-today/

https://jeremy.codes/blog/a-less-risky-differential-serving-pattern/

https://www.pika.dev/blog/pika-web-a-future-without-webpack/

https://github.com/w3c/device-memory

https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking/

https://medium.com/webpack/brief-introduction-to-scope-hoisting-in-webpack-8435084c171f

https://react-etc.net/entry/json-tree-shaking-lands-in-webpack-4-0

https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

https://medium.freecodecamp.org/reducing-css-bundle-size-70-by-cutting-the-class-names-and-using-scope-isolation-625440de600b

https://webpack.js.org/guides/code-splitting/

https://github.com/GoogleChromeLabs/preload-webpack-plugin

https://webpack.js.org/guides/code-splitting/#prefetching-preloading-modules

https://andydavies.me/blog/2019/02/12/preloading-fonts-and-the-puzzle-of-priorities/

https://vimeo.com/235431630#t=11m37s

https://github.com/ampproject/rollup-plugin-closure-compiler

https://github.com/nolanlawson/rollupify

https://nolanlawson.com/2016/08/15/the-cost-of-small-modules/

https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad

https://blog.logrocket.com/death-by-a-thousand-cuts-a-checklist-for-eliminating-common-react-performance-issues/

https://www.youtube.com/watch?v=p9vT0W31ym8

https://philipwalton.com/articles/using-native-javascript-modules-in-production-today/

https://web.dev/off-main-thread/

https://github.com/developit/workerize

https://github.com/developit/workerize-loader

https://github.com/GoogleChromeLabs/worker-plugin

https://developers.google.com/web/updates/2019/02/hotpath-with-wasm

https://webassembly.org/

https://caniuse.com/#feat=wasm

https://hacks.mozilla.org/2018/10/calls-between-javascript-and-webassembly-are-finally-fast-🎉/

https://www.fastly.com/blog/announcing-lucet-fastly-native-webassembly-compiler-runtime

https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/

https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71

https://www.youtube.com/watch?v=Z6ZhIA8i_8g

https://codelabs.developers.google.com/codelabs/web-assembly-intro/index.html

https://www.youtube.com/watch?v=6v4E6oksar0

https://www.youtube.com/watch?v=l2DHjRmgAF8

https://www.lucidchart.com/techblog/2016/09/26/improving-angular-2-load-times/

https://www.smashingmagazine.com/2016/03/server-side-rendering-react-node-express/

http://kangax.github.io/compat-table/es6/

https://gist.github.com/newyankeecodeshop/79f3e1348a09583faf62ed55b58d09d9

https://caniuse.com/#feat=es6-module

https://github.com/philipwalton/webpack-esnext-boilerplate

https://jakearchibald.com/2017/es-modules-in-browsers/

https://github.com/lodash/babel-plugin-lodash

https://www.contentful.com/blog/2017/10/27/put-your-webpack-bundle-on-a-diet-part-3/

https://www.smashingmagazine.com/2018/10/smart-bundling-legacy-code-browsers/

https://github.com/GoogleChromeLabs/puppeteer-examples

https://github.com/GoogleChromeLabs/quicklink

https://instant.page/