Reducing bundle size: globalThis.__DEV__

[damienwebdev]

I was reading through https://www.apollographql.com/docs/react/development-testing/reducing-bundle-size/ and was wondering if anyone had done this before.

If so, how can we document this for Angular? Additionally, as Apollo recommends reviewing import style per project, does anyone have any hard evidence to support one style or another in their project?

[matmeylan]

Hey @damienwebdev, have you managed to do it ?

[damienwebdev]

No.

[PowerKiKi]

Turning off development mode

Since angular/angular-cli@7f57123, so Angular 17.2, if you are using esbuild builder, then you can add this in your angular.json file:

--- angular.json
+++ angular.json
@@ -38,6 +38,9 @@
           },
           "configurations": {
             "production": {
+              "define": {
+                "globalThis.__DEV__": "false"
+              },
               "budgets": [
                 {
                   "type": "initial",

This will save about 6.6 kB, as seen below in a brand new, generated Angular app:

Before:

Initial chunk files   | Names         |  Raw size | Estimated transfer size
main-GQVTFMH3.js      | main          | 414.74 kB |               108.39 kB
polyfills-SCHOHYNV.js | polyfills     |  34.52 kB |                11.29 kB
styles-5INURTSO.css   | styles        |   0 bytes |                 0 bytes

                      | Initial total | 449.27 kB |               119.68 kB

After:

Initial chunk files   | Names         |  Raw size | Estimated transfer size
main-B7IM3MXE.js      | main          | 408.15 kB |               106.56 kB
polyfills-SCHOHYNV.js | polyfills     |  34.52 kB |                11.29 kB
styles-5INURTSO.css   | styles        |   0 bytes |                 0 bytes

                      | Initial total | 442.67 kB |               117.85 kB

Picking an import style

For an Angular app, there is no choice. Importing from the main @apollo/client will not compile because of dependencies on React. Instead we must deep import from @apollo/client/core.

If you use import {graphql} from "apollo-angular"; to get typed document, then you should instead use import {gql as graphql} from "apollo-angular";. See #2314