Skip to content

Large builds because of process.env #915

Closed
Closed
Large builds because of process.env#915

Description

@sheerun
sheerun
opened on Oct 16, 2016

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.

Activity

  1. gaearon commented on Oct 16, 2016

    @gaearon
    gaearon
    on Oct 16, 2016
    Contributor

    Would you like to send a PR for this?

  2. sheerun commented on Oct 16, 2016

    @sheerun
    sheerun
    on Oct 16, 2016
    ContributorAuthor

    not right now

  3. thien-do commented on Oct 17, 2016

    @thien-do
    thien-do
    on Oct 17, 2016
    Contributor

    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.

  4. gaearon commented on Oct 17, 2016

    @gaearon
    gaearon
    on Oct 17, 2016
    Contributor

    @dvkndn This looks reasonable, yes

  5. thien-do commented on Oct 17, 2016

    @thien-do
    thien-do
    on Oct 17, 2016
    Contributor

    @gaearon thank you, I created a PR

  6. fson commented on Oct 23, 2016

    @fson
    fson
    on Oct 23, 2016
    Contributor

    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");
  7. fson
    closed this as completedon Oct 23, 2016

  8. sheerun commented on Oct 23, 2016

    @sheerun
    sheerun
    on Oct 23, 2016
    ContributorAuthor

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

  9. fson commented on Oct 23, 2016

    @fson
    fson
    on Oct 23, 2016
    Contributor

    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.

  10. oriSomething commented on Feb 5, 2018

    @oriSomething
    oriSomething
    on Feb 5, 2018

    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

  11. lock
    locked and limited conversation to collaborators on Jan 20, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions