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/src/jsutils/instanceOf.ts b/src/jsutils/instanceOf.ts index 05eac2ca89..27c4ab4d12 100644 --- a/src/jsutils/instanceOf.ts +++ b/src/jsutils/instanceOf.ts @@ -1,5 +1,11 @@ import { inspect } from './inspect'; +/* c8 ignore next 3 */ +const isProduction = + globalThis.process && + // eslint-disable-next-line no-undef + process.env.NODE_ENV === 'production'; + /** * A replacement for instanceof which includes an error warning when multi-realm * constructors are detected. @@ -9,7 +15,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; } diff --git a/website/docs/tutorials/going-to-production.md b/website/docs/tutorials/going-to-production.md new file mode 100644 index 0000000000..fcc4a9ca37 --- /dev/null +++ b/website/docs/tutorials/going-to-production.md @@ -0,0 +1,127 @@ +--- +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 `process.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', ], };