going-to-production.mdx

title
Going to Production

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

export default defineConfig({
  // ...
  define: {
    'globalThis.process': JSON.stringify(true),
    'process.env.NODE_ENV': JSON.stringify('production'),
  },
});

Next.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 to modify the bundler configuration.

const webpack = require('webpack');
module.exports = {
  webpack: {
    plugins: [
      new webpack.DefinePlugin({
        'globalThis.process': JSON.stringify(true),
        'process.env.NODE_ENV': JSON.stringify('production'),
      }),
    ],
  },
};

esbuild

{
  "define": {
    "globalThis.process": true,
    "process.env.NODE_ENV": "production"
  }
}

Webpack

config.plugins.push(
  new webpack.DefinePlugin({
    'globalThis.process': JSON.stringify(true),
    'process.env.NODE_ENV': JSON.stringify('production'),
  }),
);

Rollup

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

{
  "jsc": {
    "transform": {
      "optimizer": {
        "globals": {
          "vars": {
            "globalThis.process": true,
            "process.env.NODE_ENV": "production"
          }
        }
      }
    }
  }
}