Apollo and graphql bundle size combined increases significantly

[miqdadfwz]

Intended outcome:

Bundle size does not increases significantly

Actual outcome:

We can run our production application successfully after we updating to 3.4.9 from 3.1.18, but the size from apollo and specifically from graphql increases around 13kb combined (see image below).

version 3.3.18

version 3.4.9

I was aware there that process.env.NODE_ENV is replaced by __DEV__ to avoid size increment, but apollo size is still increases. It is not that big but if we combine with graphql which is the core depedendcy for apollo-client, it increases significantly.

I'm not quite sure this is an actual issue, or maybe is this expected outcome after we updating the version? if yes then any
reason behind of it?
How to reproduce the issue:

Update to latest version of 3.4.9 and run webpack bundle analyzer, compare the result with 3.3.18.

Versions

 System:
    OS: macOS 11.2.3
  Binaries:
    Node: 12.22.0 - ~/.nvm/versions/node/v12.22.0/bin/node
    npm: 7.20.6 - ~/.nvm/versions/node/v12.22.0/bin/npm
  Browsers:
    Chrome: 92.0.4515.159
    Safari: 14.0.3
  npmPackages:
    @apollo/client: 3.4.9 => 3.4.9

[paales]

I'm seeing a very significant increase as well. Below is the output of our build system:

We're all trying to keep our bundle sizes down as much as possible and increase of 13kB seems insane for a point release. 😅

Page	Size old	Size new	Size diff	First load old	First load new	First load diff
/	0.4kB	0.4kB		230kB	243.0kB	+13kB🚨
/_app				150kB	159.0kB	+9kB🚨
/[...url]	3.0kB	3.0kB		250kB	263.0kB	+13kB🚨
/404	6.4kB	6.4kB		222kB	235.0kB	+13kB🚨
/account	11.6kB	12.6kB	+1.0kB⚠️	204kB	218.0kB	+14kB🚨
/account/addresses	5.8kB	10.0kB	+4.2kB⚠️	214kB	228.0kB	+14kB🚨
/account/addresses/add	7.0kB	7.5kB	0.5kB	228kB	242.0kB	+14kB🚨
/account/addresses/edit	4.5kB	7.7kB	+3.2kB⚠️	232kB	246.0kB	+14kB🚨
/account/authentication	6.4kB	7.9kB	+1.5kB⚠️	225kB	239.0kB	+14kB🚨
/account/contact	6.7kB	8.2kB	+1.5kB⚠️	226kB	240.0kB	+14kB🚨

[benjamn]

Unless I'm misreading, that's +13kB of minified code before gzip, which translates to 27.14kB - 24.28kB = 2.86kB of additional bundle size (after gzip) in @miqdadfwz's example. While I understand your concern over that increase, as long as you're following the advice about replacing __DEV__, I don't have any easy advice for you.

Apollo Client 3.4 was a big (250 commit) minor release, with significant new functionality. To make matters worse, because it was a minor release, we did not have the luxury of removing anything people might be depending on. Removal of functionality will become possible in the next major version (AC4), and please rest assured we will be looking for ways to dramatically reduce the footprint of the library in the next major version. For now, thank you for your patience with our backwards compatibility obligations.

I don't know exactly how your bundlers are configured, so there might be opportunities to improve bundle sizes on the application side, without changes to Apollo Client. If you discover anything along those lines, or if you can identify parts of the library you know you aren't using, but that still end up in your bundle, please let us know, so we can talk about specific solutions.

[paales]

Hi @benjamn! Thanks for your detailed reply this really helps!

The reported sizes are gzipped sizes, so that made me jump a bit. The above is the build output of our nextjs project (formatted as a table).

I've implemented the __DEV__ replacement for @apollo/client that does help a lot!

Page	Size old	Size new	Size diff	First load old	First load new	First load diff
/	0.4kB	0.4kB		230kB	238.0kB	+8kB🚨
/_app				150kB	156.0kB	+6kB🚨
/[...url]	3.0kB	3.0kB		250kB	258.0kB	+8kB🚨
/404	6.4kB	6.4kB		222kB	231.0kB	+9kB🚨
/account	11.6kB	12.5kB	0.9kB	204kB	214.0kB	+10kB🚨
/account/addresses	5.8kB	9.9kB	+4.1kB⚠️	214kB	224.0kB	+10kB🚨
/account/addresses/add	7.0kB	7.5kB	0.5kB	228kB	238.0kB	+10kB🚨
/account/addresses/edit	4.5kB	7.7kB	+3.2kB⚠️	232kB	241.0kB	+9kB🚨
/account/authentication	6.4kB	7.9kB	+1.5kB⚠️	225kB	235.0kB	+10kB🚨
/account/contact	6.7kB	8.2kB	+1.5kB⚠️	226kB	235.0kB	+9kB🚨

I'm not sure why the bundle size is still increasing 8kb, debugging further..

I've generated treemaps with lighthouse which. The result is a bit cluttered because nextjs prefetches bundles for different pages, but the important one is the top left one.

Lighthouse treemap with 3.3
Lighthouse treemap with 3.4

This shows that the difference between @apollo/client doesn't really differ much (maybe because I've now just implemented the __DEV__ stuff), but it seems that graphql/type/definitions.mjs are now included which weren't included previously.. Any suggestions to improve it further?