Inject NODE_ENV=production when building app with --prod

Description

NODE_ENV env variable is used widely in the js environment to mark the production version of a build.

Motivation

Production build command has to be run with NODE_ENV=production to get the best optimization result.

Without NODE_ENV=production:

$ yarn build wizard --prod
yarn run v1.22.4
$ nx build wizard --prod

> nx run wizard:build:production 
Starting type checking service...
Using 2 workers with 2048MB memory limit
Hash: 49714b4f2c714d253909
Built at: 08/26/2020 8:16:21 AM
Entrypoint main [big] = runtime.4e9d49fabb961c79b027.js vendor.3e61a74c967da0482112.esm.js main.cc6f80f2e5704e40992d.esm.js
chunk    {0} main.cc6f80f2e5704e40992d.esm.js (main) 381 KiB ={1}= ={2}= [initial] [rendered]
chunk    {1} runtime.4e9d49fabb961c79b027.js (runtime) 0 bytes ={0}= ={2}= [entry] [rendered]
chunk    {2} vendor.3e61a74c967da0482112.esm.js (vendor) 2.51 MiB ={0}= ={1}= [initial] [rendered] split chunk (cache group: vendor) (name: vendor)
Done in 31.53s.

with NODE_ENV=production:

$ NODE_ENV=production yarn build wizard --prod --no-cache
yarn run v1.22.4
$ nx build wizard --prod --no-cache

> nx run wizard:build:production --no-cache 
Starting type checking service...
Using 2 workers with 2048MB memory limit
Hash: 3f5664cca70ba6ff5565
Built at: 08/26/2020 8:28:07 AM
Entrypoint main [big] = runtime.4e9d49fabb961c79b027.js vendor.3131a3729f30f53d53a3.esm.js main.b483c90b1446222c378b.esm.js
chunk    {0} main.b483c90b1446222c378b.esm.js (main) 381 KiB ={1}= ={2}= [initial] [rendered]
chunk    {1} runtime.4e9d49fabb961c79b027.js (runtime) 0 bytes ={0}= ={2}= [entry] [rendered]
chunk    {2} vendor.3131a3729f30f53d53a3.esm.js (vendor) 1.7 MiB ={0}= ={1}= [initial] [rendered] split chunk (cache group: vendor) (name: vendor)
Done in 29.07s.

Without providing this env variable I get following warning in the browser console:

VM29 vendor.3e61a74c967da0482112.esm.js:2 You are currently using minified code outside of NODE_ENV === "production". This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or setting mode to production in webpack (https://webpack.js.org/concepts/mode/) to ensure you have the correct code for your production build.

Suggested Implementation

Always inject NODE_ENV variable for the build, start process - development by default and production when optimization or prod version is built.

Alternate Implementations

[timbakkum]

We are running into the same issue, but only when using nx serve our-app --prod. It seems to create a production build, but when the code is served up, process.env.NODE_ENV is still set to 'development' during runtime of our code.

However, when just running a nx build our-app --prod the code under process.env.NODE_ENV === 'development' conditionals is properly stripped out.

We don’t see a difference in build sizes when explicitly passing NODE_ENV=production to nx build our-app --prod or without, which is to be expected because we notice that the mode: production is properly set in both cases. As per the webpack documentation, it seems to automatically set the process.env.NODE_ENV to production during build time: https://webpack.js.org/guides/production/#specify-the-mode

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn’t had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏