How Webpack 5 Supercharges Build Speed: Real‑World Data from Penguin Tutor

Introduction

On October 10, 2020 Webpack 5 was released, bringing major changes that improve build efficiency and quality. This article shares practical upgrade experience and first‑hand data from the Penguin Tutor H5 project.

Comparison with Webpack 4

Build times on a MacBook Pro 15‑inch were measured for three consecutive builds. Webpack 4 took 19.6 s, 6.8 s and 7.4 s, while Webpack 5 reduced them to 14.8 s, 1.6 s and 1.5 s. After code changes, Webpack 4 required 10.5 s, 7.3 s and 6.8 s, whereas Webpack 5 needed only 4.0 s, 1.5 s and 1.6 s. Bundle size changed from 2.16 MB (v4) to 2.05 MB (v5).

New Features in Webpack 5

Key improvements include persistent caching, long‑term caching, removal of Node.js polyfills, enhanced tree‑shaking and Module Federation.

1. Persistent Caching

Webpack 5 provides a built‑in filesystem cache that requires only a

cache: { type: "filesystem" }

configuration. The cache is stored in

node_modules/.cache

by default and can be customized. In development mode the cache type defaults to memory and must be explicitly enabled for production.

2. Long‑Term Caching

Webpack 5 uses deterministic

moduleIds

and

chunkIds

, producing short numeric IDs that keep the hash stable across builds, which improves browser caching. In production the default is

'deterministic'

; in development

'named'

is recommended for readability.

<code>optimization.moduleIds = 'deterministic'
optimization.chunkIds = 'deterministic'</code>

3. Node Polyfill Removal

Webpack 5 no longer automatically polyfills Node core modules. Developers must add required polyfills manually via the

fallback

option.

<code>resolve: {
  fallback: {
    "crypto": false
  }
}</code>

4. Better Tree‑Shaking

Webpack 5 analyzes

export

and

import

statements more accurately, removing unused code. Example output shows a minimal bundle that only contains the used module.

<code>!function(){ "use strict"; console.log("hello") }();</code>

5. Module Federation

Allows multiple applications to share code at runtime. The article demonstrates a host app loading a remote Button component from another app, with shared React dependencies.

<code>const RemoteButton = React.lazy(() => import("app2/Button"));</code>

Other Notable Changes

Deprecated APIs removed.

Readable module names in development.

Native worker support.

Upgrade Pitfalls

Common issues include version mismatches, cache configuration not generating files, loader syntax changes (use

use

instead of

loaders

), and missing polyfills. Sample fixes and command‑line snippets are provided.

Conclusion

Webpack 5 delivers significantly faster builds, smaller bundles, easier long‑term caching, and powerful Module Federation, making it a worthwhile upgrade for modern frontend projects.