Simplify __DEV__ polyfill to use imports instead of global scope

[benjamn]

This PR substantially undoes much of the complexity introduced by #8347, at the cost of regressing bundle sizes by approximately 3.75KB for any application where the __DEV__ imports get transpiled to something else before the minifier has a chance to prune unreachable code, such as globals.__DEV__ following a CJS import like var globals = require("../../utilities/globals").

If compilers/transpilers/bundlers would just leave the imported __DEV__ identifiers alone, this would all work very nicely, but the ESM transpilation behavior of third-party toolchains is not something we can control.

Relevant past work:

• Use __DEV__ internally instead of process.env.NODE_ENV. #8347
• Protect __DEV__ from mis-minification / aggressive tree-shaking #8393
• Enforce that __DEV__ is polyfilled in every entry point that uses it #8689
• Import @apollo/client/utilities/globals wherever __DEV__ is used #8720
• Avoid __DEV__ declaration conflict with React Native (when "skipLibCheck": false in tsconfig.json) #9386

[benjamn]

I expected this npm run bundlesize regression to be greater (>1KB min/gzip), based on past experience, so it's encouraging that it's only 0.08KB:

For comparison, the bundlesize is 32.41KB right now on main, so it may be worth reviewing where the increases have happened on the release-3.8 branch, just in case any of them was both large and unintentional.

[benjamn]

Okay, the/one reason the bundle size regression isn't so bad is that we use Rollup to generate our all-in-one dist/apollo-client.cjs bundle, which we then minify and gzip before computing the bundle size, and Rollup manages to declare __DEV__ as a plain identifier in the CommonJS bundle:

function getDEV() {
    return "__DEV__" in global$1
        ? Boolean(global$1.__DEV__)
        : maybe(function () { return process.env.NODE_ENV; }) !== "production";
}
var DEV = getDEV();
var __DEV__ = DEV;

If we try using these changes in a webpack/CRA app like https://github.com/apollographql/react-apollo-error-template, we see a much worse regression when running npm run build:

File sizes after gzip:

  122.68 kB  build/static/js/main.0b2ae3e8.js
  208 B      build/static/css/main.94a33c21.css

It appears Webpack now applies DefinePlugin transforms like this one successfully, as long as the target is ESM rather than CJS. Removing that DefinePlugin raises the bundle size to 126.43KB, which is more in line with what I was expecting.

It's encouraging that ESM tooling seems to be getting this right by default now, whereas previously the ESM-to-CJS compilation step threw a 🔧 into the works. I'm still a little worried about regressing bundle sizes for existing apps that compile all the way to CommonJS, but perhaps that's (more) tolerable since compiling to ESM is getting easier and is more often the default behavior.

[benjamn]

Explaining the changes from 4207078:

When adding new exports to @apollo/client/utilities, the exported stuff needs to be accessible from the top-level @apollo/client/utilities package if it's going to be used elsewhere within @apollo/client (outside /utilities). This problem is flagged during npm run build by warnings like

Risky cross-entry-point nested import of ../version in core/ApolloClient.js
...
Risky cross-entry-point nested import of ../../react/cache in testing/react/MockedProvider.js
Risky cross-entry-point nested import of ../../react/cache/index.js in testing/react/MockedProvider.js

These are just warnings because they are not always a problem: cross-entry-point code may be unintentionally duplicated across CJS bundles, which can be a problem if the code defines a class that's only supposed to have one definition (for example), but in other cases the duplication is convenient and harmless, such as when the CJS bundle is used only for testing, or the duplicated code is safe to duplicate (like the import of ../version from within core/ApolloClient.js).

[jerelmiller]

re:

it may be worth reviewing where the increases have happened on the release-3.8 branch

Much if this from the new useSuspenseQuery hook introduced in this branch. We've had some other minor changes, but this is the biggest contributing factor.

[jerelmiller]

🚢 This looks good to me! Really appreciate you diving into this right away!

[jerelmiller]

Oh ya, and don't forget to add a changeset (npx changeset) so we can make sure this change bumps a patch release.

[alessbell]

/release:pr

[github-actions]

A new release has been made for this PR. You can install it with npm i @apollo/client@0.0.0-pr-10521-20230206180228.

[benjamn]

Nice, thanks to that release, I'm confident this version of the library still works without bundling, as you can see by running this code in your browser console:

await import("https://cdn.jsdelivr.net/npm/@apollo/client@0.0.0-pr-10521-20230206180228/+esm")

[alessbell]

Thanks for the background! Excited to have people try out the PR/alpha build with these changes 😄