React-apollo: Bundle size increase from =>2.3.0: react-dom-server.browser.production added. Why?

[frederikhors]

Simply updating react-apollo from 2.2.4 to 2.3.0 alter bundle size like in the screens below:

- from this:

- to this:

Are you aware?
Why?

Version

• [email protected]

[JoviDeCroock]

Bundle size has been heavily focussed on in 2.5.0 and is much smaller in that version.

[frederikhors]

Bundle size has been heavily focussed on in 2.5.0 and is much smaller in that version.

2.5.0 still with this "problem".

[JoviDeCroock]

I think this issue is situated at your end judging from what I'm looking at: https://bundlephobia.com/[email protected]

This lists the included dependencies, which does not include react-dom. Could you give some more information about your setup please?

[frederikhors]

@JoviDeCroock, what do you need?

Asked also here: https://github.com/facebook/react/issues/15060

[frederikhors]

Ok I just found the problem: https://github.com/apollographql/react-apollo/blob/master/Changelog.md#improvements-9

Is this problem fixable?

[smably]

I'm running into this issue too. I had a look into this and the best solution I came up with (at least until dynamic import is safe for library use: https://github.com/apollographql/react-apollo/pull/2533#discussion_r230061804) is to move getDataFromTree and renderToStringWithData into a separate bundle (react-apollo/server?) similar to how react-dom bundles all its server rendering logic in react-dom/server. This would avoid bundling extra react-dom logic for the vast majority of users who never call getDataFromTree from the browser.

Of course, that would be a breaking change, but maybe it could be considered for 3.0?

[smably]

@JoviDeCroock Threw up a minimal repro here in case you want to verify for yourself: https://github.com/smably/react-apollo-test

[JoviDeCroock]

If you use ESM then it should be tree-shaken off if you're not using renderToStringWithData. Thus if that repository contains Query etc. Then there's something wrong with how tree-shakeable this repo is.

[damusnet]

FWIW 2.5.0, 2.5.1 and 2.5.2 had reduced size considerably, but 2.5.3 seems to revert the trend. See https://github.com/apollographql/react-apollo/issues/2918

[JoviDeCroock]

@damusnet the reason behind this is because they bundled in lodash.isequal

[frederikhors]

This thread is about getDataFromTree problem.

The @damusnet's one thread (https://github.com/apollographql/react-apollo/issues/2918) is for lodash.isEqual problem.

Am I right?

[damusnet]

@frederikhors I think you are correct that there might be 2 issues. I don't know if it's better to track them separately or to treat bundlesize as a whole.

[frederikhors]

@damusnet separately.

[hwillson]

lodash.isequal was improperly marked as a dev dependency. The bundle size increase comes from correcting this. React Apollo 3 won't have this problem however, since it uses the apollo-utilities isEqual function instead, which is much smaller than lodash.isequal (see https://github.com/apollographql/apollo-client/pull/4924). RA 3 is landing very soon, so closing this for now. Thanks!

[frederikhors]

@hwillson please re-open. The problem is in react-dom not with lodash.

[hwillson]

@frederikhors Do you still have the react-dom issue after updating to react-apollo >= 2.3.2? This should fix that issue, but let me know if not.

[Aghassi]

@hwillson 2.5.7 experiences the same issue if you run it through webpack for use as a standalone asset on a CDN. Treeshaking does not apply to our app architecture (SPA with microfrontends) since our code is sharing a single package of react-apollo. As mentioned earlier in this thread, can things that use react-dom/server safely be separated into standalone packages or something that we can then server separately?

[Aghassi]

For now I've opened a feature request to have this stuff omitted from the UMD bundle https://github.com/apollographql/apollo-feature-requests/issues/118

[hwillson]

Valid points @Aghassi - I'll follow up in the FR. Thanks!