chore(@automattic/composite-checkout): Update webpack-dev-server

[scinos]

Changes proposed in this Pull Request

• Uses a version of webpack-dev-server compatible with webpack 5

Changelog

Testing instructions

• Checkout this branch and run composite-checkout-demo. Verify http://localhost:3000 loads without problems.

[matticbot]

Test live: https://calypso.live/?branch=update/webpack-dev-server-4.0.0-beta

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~69 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-main                  -105 B  (-0.0%)      -29 B  (-0.0%)
entry-login                 -105 B  (-0.0%)      -27 B  (-0.0%)
entry-gutenboarding         -105 B  (-0.0%)      -25 B  (-0.0%)
entry-domains-landing       -105 B  (-0.0%)      -33 B  (-0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[scinos]

Moved to [draft] until I understand why the increase in bundle size

[sirbrillig]

This looks fine in general. Let me know if I can help!

[tyxla]

Seems to need a rebase. Also, any finds as to where the bundle changes came from?

[scinos]

Also, any finds as to where the bundle changes came from?

Yes! And it is rather interesting:

• Before webpack 5 - Webpack 4 uses its own set of polyfills for node modules. So when a package does require("util"), webpack bundled its own polyfill. As util is a node module, many packages don't have an explicit dependency on util in their package.json.

• With webpack 5 (i.e. trunk) - Webpack doesn't include those polyfills anymore, is up to the consumer to install them. Because we have some packages depending on util (from https://github.com/browserify/node-util), we end up having [email protected] in node_modules/util, and that's the version webpack will use to polyfill require("util").

• With this PR - webpack-dev-server brings in a new util version that gets hoisted, and now node_modules/util points to [email protected]. That's the version webpack will use to polyfill require("util"). As such, any bundle that were doing require("util") will now use a different version of util. This new version of util is bigger because it has more dependencies, therefore the bundlers are bigger.

---

I think the new situation is correct: webpack uses the latest util to polyfill require('util'). But I don't like that it happens by accident: if yarn decides to hoist an older version of util, bundle sizes will change again for no apparent reason.

Probably the solution (as hinted in browserify/node-util#57) is to have a explicit alias in webpack config, making sure util is always resolved to a specific version and not to whatever happens to get hoisted.

/cc @jsnajdr

[jsnajdr]

have a explicit alias in webpack config, making sure util is always resolved to a specific version

Yes, we already have a similar alias for some @wordpress/* packages (see also #48162).

But where does that require( 'util' ) come from? I can't find any util import in the Calypso codebase itself. So is it some third party package?

Using Node packages in browser code is undesired and should be eliminated if possible.

[scinos]

But where does that require( 'util' ) come from? I can't find any util import in the Calypso codebase itself. So is it some third party package?

The one I found comes via ./state/utils/schema-utils.js -> node_modules/is-my-json-valid/index.js -> node_modules/generate-function/index.js -> node_modules/util/util.js

[jsnajdr]

@scinos and npm run whybundled tells me that's actually the only place where the util module is used:

 MODULE  util
├─ imported: 1 time
├─ deps count: 1
├─ size: 20 KiB [for all included files]
├─ type: [transitive]
│  └─ util -> generate-function -> is-my-json-valid
│  
├─ chunks: vendors-node_modules_uuid_dist_esm-browser_v4_js-node_modules_crc32_lib_crc32_js-node_modules-26c5b7
├─ locations: 
│  └─ ../node_modules/util/
│  
├─ files: 
│  ├─ ../node_modules/util/support/isBufferBrowser.js
│  └─ ../node_modules/util/util.js
│  
└─ reasons:
   └─ generate-function
      └─ ../node_modules/generate-function/index.js  1:11-26  [cjs require]

[scinos]

Update: A different PR was created and merged to fix the version of util (#50074). As expected, that PR increased bundle size. Now that it is in trunk, this PR doesn't change bundle size in a significant way anymore.

[tyxla]

There might be some candidates for deduping, but can be done in subsequent PRs. This looks good and works as expected 🚢

[tyxla]

Could this one use some deduping?

[scinos]

Thanks for checking :) In this case, ~0.10.0 and ^0.11.3 don't overlap.

I've found https://semver.npmjs.com/ really useful to verify what versions can satisfy a range.

[tyxla]

Seems like this could use some deduping?

[scinos]

Same, ~2.1.2 and ~2.3.1 (or ^2.1.2) don't overlap