Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apollo and graphql bundle size combined increases significantly #8705

Closed
miqdadfwz opened this issue Aug 26, 2021 · 7 comments · Fixed by #8891
Closed

Apollo and graphql bundle size combined increases significantly #8705

miqdadfwz opened this issue Aug 26, 2021 · 7 comments · Fixed by #8891

Comments

@miqdadfwz
Copy link

miqdadfwz commented Aug 26, 2021

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
Screen Shot 2021-08-26 at 17 44 11
Screen Shot 2021-08-26 at 17 44 18

version 3.4.9
Screen Shot 2021-08-26 at 17 44 03
Screen Shot 2021-08-26 at 17 44 11

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
Copy link

paales commented Oct 1, 2021

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
Copy link
Member

benjamn commented Oct 1, 2021

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
Copy link

paales commented Oct 4, 2021

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?

@benjamn benjamn self-assigned this Oct 4, 2021
@benjamn benjamn added this to the v3.4.x patch releases milestone Oct 4, 2021
benjamn added a commit that referenced this issue Oct 4, 2021
To import `graphql` (and its internal `instanceOf` function) for the
first time with `process.env.NODE_ENV` safely polyfilled, PR #8347
selected a somewhat arbitrary export of the `graphql` package that uses
`instanceOf`, specifically the `isType` function exported by
`graphql/type/definition`.

As revealed by issue #8705, importing `isType` was a bad choice, since
it depends on a bunch of other code within the `graphql` package,
unnecessarily increasing minified+gzip bundle size by 3.4kB.

A better choice is the `Source` constructor, which is already imported
thanks to other necessary imports, and also imports/uses `instanceOf`.
@benjamn benjamn linked a pull request Oct 4, 2021 that will close this issue
@benjamn
Copy link
Member

benjamn commented Oct 4, 2021

@paales @miqdadfwz By my measurements, this PR will save another 3.4kB of minified+gzip bundle size: #8891. The import of isType was responsible for most of the unnecessary imports from graphql/type/definitions and elsewhere. Thanks for that clue @paales!

@benjamn
Copy link
Member

benjamn commented Oct 4, 2021

The additional bundle size from the graphql package should be fixed in @apollo/client@3.4.16 (and/or @apollo/client@3.5.0-rc.1), thanks to #8891. Please let us know if updating helps (or not) in your apps!

@paales
Copy link

paales commented Oct 5, 2021

@benjamn I've updated Apollo Client to 3.4.16 and that does seem to make a big difference, more in line of what to expect :)

Page Size old Size new Size diff First load old First load new First load diff
/ 0.4kB 0.4kB 230kB 233.0kB +3kB⚠️
/[...url] 3.0kB 3.0kB 250kB 253.0kB +3kB⚠️
/404 6.4kB 6.4kB 222kB 225.0kB +3kB⚠️
/account 11.6kB 12.5kB 0.9kB 204kB 208.0kB +4kB⚠️
/account/addresses 5.8kB 9.9kB +4.1kB⚠️ 214kB 218.0kB +4kB⚠️
/account/addresses/add 7.0kB 7.5kB 0.5kB 228kB 232.0kB +4kB⚠️
/account/addresses/edit 4.5kB 7.7kB +3.2kB⚠️ 232kB 236.0kB +4kB⚠️
/account/authentication 6.4kB 7.9kB +1.5kB⚠️ 225kB 229.0kB +4kB⚠️
/account/contact 6.7kB 8.2kB +1.5kB⚠️ 226kB 230.0kB +4kB⚠️

New treemap for 3.4.16

@miqdadfwz
Copy link
Author

Hi @benjamn thank you for fixing this! I confirm that the additional bundle size has been resolved in my end.

version 3.1.18
Screen Shot 2021-10-06 at 11 38 38

version 3.4.16
Screen Shot 2021-10-06 at 11 39 07

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 1, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.