Huge bundle size increase using Webpack 4

[dios-david]

I found a weird thing (and a fix 🎉 ) so I thought I should share it with the community.

I'm using Webpack 4 and I updated some urql packages in my project:

@urql/core: 2.0.0 -> 2.3.3
urql: 2.0.0 -> 2.0.5

Then I realised my vendor bundle increased by 7-8 kb (gzipped), which I did not really expect from these changes.
I checked bundlephobia (I know that's not 100% accurate) and I noticed that there was a slight jump at 2.3.0 but that was only ~0.7 kb (gzipped).

So I started to look into the old and the new vendor bundles using the coverage report in devtools and I realised there is a huge Buffer shim included in the new bundle. After a quick search I found out that Webpack 4 includes this Buffer shim automatically when Buffer is used in the code, as browsers usually don't implement Buffer. (afaik Webpack 5 doesn't do this anymore)

I found out that in 2.3.0 urql introduced support for @defer and @stream which included some new usages of Buffer, which then made Webpack 4 bundling the Buffer shim in my new vendor bundle.

I'm not using @defer/@stream currently so I think it's safe to remove the shim to save some kbs in my vendor bundle. I could achieve this by adding this to the webpack config (docs here):

module.exports = {
  //...
  node: {
    Buffer: false,
  }
};

I hope this is useful for other Webpack 4 users here :)

[kitten]

Ha! looks like we'll have to obscure this for Webpack 😄 Thanks for the report!