From 546c13f4d67d4f87f42997c529fa51579df895cc Mon Sep 17 00:00:00 2001 From: Jovi De Croock Date: Wed, 14 Feb 2024 14:05:03 +0100 Subject: [PATCH 1/8] remove globalThis process env check --- src/jsutils/instanceOf.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/jsutils/instanceOf.ts b/src/jsutils/instanceOf.ts index 05eac2ca89..7f7148b59f 100644 --- a/src/jsutils/instanceOf.ts +++ b/src/jsutils/instanceOf.ts @@ -1,5 +1,7 @@ import { inspect } from './inspect'; +const isProduction = typeof process !== 'undefined' && process.env && process.env.NODE_ENV === 'production'; + /** * A replacement for instanceof which includes an error warning when multi-realm * constructors are detected. @@ -9,7 +11,7 @@ import { inspect } from './inspect'; export const instanceOf: (value: unknown, constructor: Constructor) => boolean = /* c8 ignore next 6 */ // FIXME: https://github.com/graphql/graphql-js/issues/2317 - globalThis.process && globalThis.process.env.NODE_ENV === 'production' + isProduction ? function instanceOf(value: unknown, constructor: Constructor): boolean { return value instanceof constructor; } From b0ca7e032e47fa08a27b5fcef3a1f784105b04d1 Mon Sep 17 00:00:00 2001 From: Jovi De Croock Date: Wed, 14 Feb 2024 14:19:04 +0100 Subject: [PATCH 2/8] add eslint ignore as there was before --- src/jsutils/instanceOf.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/jsutils/instanceOf.ts b/src/jsutils/instanceOf.ts index 7f7148b59f..198255365a 100644 --- a/src/jsutils/instanceOf.ts +++ b/src/jsutils/instanceOf.ts @@ -1,6 +1,13 @@ import { inspect } from './inspect'; -const isProduction = typeof process !== 'undefined' && process.env && process.env.NODE_ENV === 'production'; +/* c8 ignore next 4 */ +const isProduction = + // eslint-disable-next-line no-undef + typeof process !== 'undefined' && + // eslint-disable-next-line no-undef + process.env && + // eslint-disable-next-line no-undef + process.env.NODE_ENV === 'production'; /** * A replacement for instanceof which includes an error warning when multi-realm From cbb05cf432daa065e74479549af3700737ee9086 Mon Sep 17 00:00:00 2001 From: Jovi De Croock Date: Sat, 4 May 2024 15:41:20 +0200 Subject: [PATCH 3/8] Update src/jsutils/instanceOf.ts --- src/jsutils/instanceOf.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/jsutils/instanceOf.ts b/src/jsutils/instanceOf.ts index 198255365a..bdf812864e 100644 --- a/src/jsutils/instanceOf.ts +++ b/src/jsutils/instanceOf.ts @@ -1,12 +1,10 @@ import { inspect } from './inspect'; -/* c8 ignore next 4 */ +/* c8 ignore next 3 */ const isProduction = // eslint-disable-next-line no-undef typeof process !== 'undefined' && // eslint-disable-next-line no-undef - process.env && - // eslint-disable-next-line no-undef process.env.NODE_ENV === 'production'; /** From 0b8e1079bb14b8e257975414a2a6f24fd0975ade Mon Sep 17 00:00:00 2001 From: Jovi De Croock Date: Sat, 11 May 2024 11:08:53 +0200 Subject: [PATCH 4/8] remove unused directive --- src/jsutils/instanceOf.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/jsutils/instanceOf.ts b/src/jsutils/instanceOf.ts index bdf812864e..9ae3b18157 100644 --- a/src/jsutils/instanceOf.ts +++ b/src/jsutils/instanceOf.ts @@ -2,7 +2,6 @@ import { inspect } from './inspect'; /* c8 ignore next 3 */ const isProduction = - // eslint-disable-next-line no-undef typeof process !== 'undefined' && // eslint-disable-next-line no-undef process.env.NODE_ENV === 'production'; From 157490b2cc56d198aea75a618a344e828ba276ef Mon Sep 17 00:00:00 2001 From: Jovi De Croock Date: Wed, 29 May 2024 20:00:08 +0200 Subject: [PATCH 5/8] update check to use globalThis.process --- src/jsutils/instanceOf.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/jsutils/instanceOf.ts b/src/jsutils/instanceOf.ts index 9ae3b18157..27c4ab4d12 100644 --- a/src/jsutils/instanceOf.ts +++ b/src/jsutils/instanceOf.ts @@ -2,7 +2,7 @@ import { inspect } from './inspect'; /* c8 ignore next 3 */ const isProduction = - typeof process !== 'undefined' && + globalThis.process && // eslint-disable-next-line no-undef process.env.NODE_ENV === 'production'; From 5b3f00e0c737b66207e3729c4e81e84a81a65cd8 Mon Sep 17 00:00:00 2001 From: Jovi De Croock Date: Wed, 29 May 2024 20:07:33 +0200 Subject: [PATCH 6/8] add docs --- website/docs/tutorials/going-to-production.md | 128 ++++++++++++++++++ website/sidebars.js | 5 + 2 files changed, 133 insertions(+) create mode 100644 website/docs/tutorials/going-to-production.md diff --git a/website/docs/tutorials/going-to-production.md b/website/docs/tutorials/going-to-production.md new file mode 100644 index 0000000000..bea989204a --- /dev/null +++ b/website/docs/tutorials/going-to-production.md @@ -0,0 +1,128 @@ +--- +title: Going to production +category: FAQ +--- + +GraphQL.JS contains a few development checks which in production will cause slower performance and +an increase in bundle-size. Every bundler goes about these changes different, in here we'll list +out the most popular ones. + +## Bundler-specific configuration + +Here are some bundler-specific suggestions for configuring your bundler to remove `globalThis.process` and `proces.env.NODE_ENV` on build time. + +### Vite + +```js +export default defineConfig({ + // ... + define: { + "globalThis.process": JSON.stringify(true), + "process.env.NODE_ENV": JSON.stringify("production"), + }, +}); +``` + +### Next.js + +```js +// ... +/** @type {import('next').NextConfig} */ +const nextConfig = { + webpack(config, { webpack }) { + config.plugins.push( + new webpack.DefinePlugin({ + "globalThis.process": JSON.stringify(true), + "process.env.NODE_ENV": JSON.stringify("production"), + }) + ); + return config; + }, +}; + +module.exports = nextConfig; +``` + +### create-react-app + +With `create-react-app`, you need to use a third-party package like [`craco`](https://craco.js.org/) to modify the bundler configuration. + +```js +const webpack = require("webpack"); +module.exports = { + webpack: { + plugins: [ + new webpack.DefinePlugin({ + "globalThis.process": JSON.stringify(true), + "process.env.NODE_ENV": JSON.stringify("production"), + }), + ], + }, +}; +``` + +### esbuild + +```json +{ + "define": { + "globalThis.process": true, + "process.env.NODE_ENV": "production" + } +} +``` + +### Webpack + +```js +config.plugins.push( + new webpack.DefinePlugin({ + "globalThis.process": JSON.stringify(true), + "process.env.NODE_ENV": JSON.stringify("production"), + }) +); +``` + +### Rollup + +```js +export default [ + { + // ... input, output, etc. + plugins: [ + minify({ + mangle: { + toplevel: true, + }, + compress: { + toplevel: true, + global_defs: { + "@globalThis.process": JSON.stringify(true), + "@process.env.NODE_ENV": JSON.stringify("production"), + }, + }, + }), + ], + }, +]; +``` + +### SWC + +```json title=".swcrc" +{ + "jsc": { + "transform": { + "optimizer": { + "globals": { + "vars": { + "globalThis.process": true, + "process.env.NODE_ENV": "production" + } + } + } + } + } +} +``` + diff --git a/website/sidebars.js b/website/sidebars.js index 79fe5e9d8b..7b4722bd7c 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -15,6 +15,11 @@ module.exports = { label: 'Advanced', items: ['tutorials/constructing-types'], }, + { + type: 'category', + label: 'FAQ', + items: ['tutorials/going-to-production'], + }, 'tutorials/express-graphql', ], }; From 6b6d7d3b1fa1a95dc1ce2fc2c8147df0906d65de Mon Sep 17 00:00:00 2001 From: Jovi De Croock Date: Wed, 29 May 2024 20:56:27 +0200 Subject: [PATCH 7/8] run prettier --- website/docs/tutorials/going-to-production.md | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/website/docs/tutorials/going-to-production.md b/website/docs/tutorials/going-to-production.md index bea989204a..a613931f85 100644 --- a/website/docs/tutorials/going-to-production.md +++ b/website/docs/tutorials/going-to-production.md @@ -17,8 +17,8 @@ Here are some bundler-specific suggestions for configuring your bundler to remov export default defineConfig({ // ... define: { - "globalThis.process": JSON.stringify(true), - "process.env.NODE_ENV": JSON.stringify("production"), + 'globalThis.process': JSON.stringify(true), + 'process.env.NODE_ENV': JSON.stringify('production'), }, }); ``` @@ -32,9 +32,9 @@ const nextConfig = { webpack(config, { webpack }) { config.plugins.push( new webpack.DefinePlugin({ - "globalThis.process": JSON.stringify(true), - "process.env.NODE_ENV": JSON.stringify("production"), - }) + 'globalThis.process': JSON.stringify(true), + 'process.env.NODE_ENV': JSON.stringify('production'), + }), ); return config; }, @@ -48,13 +48,13 @@ module.exports = nextConfig; With `create-react-app`, you need to use a third-party package like [`craco`](https://craco.js.org/) to modify the bundler configuration. ```js -const webpack = require("webpack"); +const webpack = require('webpack'); module.exports = { webpack: { plugins: [ new webpack.DefinePlugin({ - "globalThis.process": JSON.stringify(true), - "process.env.NODE_ENV": JSON.stringify("production"), + 'globalThis.process': JSON.stringify(true), + 'process.env.NODE_ENV': JSON.stringify('production'), }), ], }, @@ -77,9 +77,9 @@ module.exports = { ```js config.plugins.push( new webpack.DefinePlugin({ - "globalThis.process": JSON.stringify(true), - "process.env.NODE_ENV": JSON.stringify("production"), - }) + 'globalThis.process': JSON.stringify(true), + 'process.env.NODE_ENV': JSON.stringify('production'), + }), ); ``` @@ -97,8 +97,8 @@ export default [ compress: { toplevel: true, global_defs: { - "@globalThis.process": JSON.stringify(true), - "@process.env.NODE_ENV": JSON.stringify("production"), + '@globalThis.process': JSON.stringify(true), + '@process.env.NODE_ENV': JSON.stringify('production'), }, }, }), @@ -125,4 +125,3 @@ export default [ } } ``` - From f57c710fcb7cae89465949a281f63e89896875c5 Mon Sep 17 00:00:00 2001 From: Jovi De Croock Date: Wed, 29 May 2024 20:59:42 +0200 Subject: [PATCH 8/8] add spelling checks --- cspell.yml | 4 ++++ website/docs/tutorials/going-to-production.md | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/cspell.yml b/cspell.yml index 8770a4d781..88780fc80b 100644 --- a/cspell.yml +++ b/cspell.yml @@ -19,6 +19,10 @@ overrides: - clsx - infima - noopener + - Vite + - craco + - esbuild + - swcrc - noreferrer - xlink diff --git a/website/docs/tutorials/going-to-production.md b/website/docs/tutorials/going-to-production.md index a613931f85..fcc4a9ca37 100644 --- a/website/docs/tutorials/going-to-production.md +++ b/website/docs/tutorials/going-to-production.md @@ -9,7 +9,7 @@ out the most popular ones. ## Bundler-specific configuration -Here are some bundler-specific suggestions for configuring your bundler to remove `globalThis.process` and `proces.env.NODE_ENV` on build time. +Here are some bundler-specific suggestions for configuring your bundler to remove `globalThis.process` and `process.env.NODE_ENV` on build time. ### Vite