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
.swcrc
{
"jsc": {
"transform": {
"optimizer": {
"globals": {
"vars": {
"globalThis.process": true,
"process.env.NODE_ENV": "production"
}
}
}
}
}
}