Large builds because of process.env

[sheerun]

As mentioned in #807 (comment)

Description

Such approach can result in large development builds, if process.env.NODE_ENV is used frequently in code.. I't because each time it becomes { whole: "config", NODE_ENV: "dev", ... }.NODE_ENV.

Expected behavior

I think the better approach is to create definitions for both, so we get short aliases if possible and at the same time process.env is fully supported. That is create both mappings:

process.env.FOOBAR = 'xxx';
process.env = { FOOBAR: 'xxx' };

for each defined FOOBAR variable.

[gaearon]

Would you like to send a PR for this?

[sheerun]

not right now

[thien-do]

Hi guys, I can do this PR if @sheerun is busy. Is this what you are looking for: thien-do@3166668

If it is ok, should I create a PR? Also, I'm not sure if this is the best way to do that, but I'm willing to fix if you have any suggestion.

[gaearon]

@dvkndn This looks reasonable, yes

[thien-do]

@gaearon thank you, I created a PR

[fson]

I tested this with react-scripts@0.7.0 and found out it already behaves as expected.

To test it, I ran for i in {1..1000}; do echo "REACT_APP_$i=test$i" >> .env; done to create a large .env file with 1000 environment variables like this:

REACT_APP_1=test1
REACT_APP_2=test2
REACT_APP_3=test3
...

Then I added this code to App.js:

console.log(process.env.REACT_APP_1);

and built the app with npm run build. In the final output, the code above had been correctly turned into minimal code, without any traces of the whole environment object:

console.log("test1");

[sheerun]

@fson It's probably only after minimization. Un-minimezed code is huge.

[fson]

The production code is always minified, so the size before minification should not matter in practice. But to be on the safe side I also checked this by disabling UglifyJS in the Webpack config and the non-minified output was:

console.log(("test1"))

@sheerun if you are still experiencing this issue, please create a reproducible demo (see details in the issue template). That will help us fix it faster, in case it still exists.

[oriSomething]

It seems this issue returned in react-scripts@1.1.0. The only different that the process.env object is wrapped with Object: Object({NODE_ENV:…}).NODE_ENV