Tree shaking only works with process.env.NODE_ENV?

I’m finding that tree shaking only works with process.env.NODE_ENV and won’t work with process.env.REACT_APP_[my variable name]

For example, if I do the following myModule is not showing up in my production build.

import {myFunction} from './myModule'

if(process.env.NODE_ENV === 'development') {
    myFunction()
}

But, if I want to use a different environment variable myModule is always included.

import {myFunction} from './myModule'

if(process.env.REACT_APP_ENABLE_MY_FUNCTION === 'true') {
    myFunction()
}

Is it known that tree shaking only works with process.env.NODE_ENV? Is there any way to do tree shaking with a custom environment variable?

[NAllred91]

Here it is…

If you want to do this:

import {myFunction} from './myModule'

if(process.env.REACT_APP_ENABLE_MY_FUNCTION === 'true') {
    myFunction()
}

You must be sure to define REACT_APP_ENABLE_MY_FUNCTION. If you do not define it then the if(process.env.REACT_APP_ENABLE_MY_FUNCTION === 'true') doesn’t get turned into if(false) at build time.

But it still evaluates to false at runtime.

So when using this command (REACT_APP_ENABLE_MY_FUNCTION=false npm run build), myModule is not included in the build. But if I just run npm run build without explicitly setting REACT_APP_ENABLE_MY_FUNCTION it is included.

I don’t see this documented anywhere, but it probably should be. Although I realize this behavior comes from something create-react-app depends on and not create-react-app itself. The only way I figured this out was by taking the time to go through the generated bundle.

[zoubingwu]

Async imports only split code to another chunk but will not prevent it from bundling it to final dist.

My solution is to always define a value with webpack define plugin:

new webpack.DefinePlugin({
    'process.env.MOCK': JSON.stringify(process.env.MOCK === 'true')
}),

In you app code, don’t do any comparison check, so it will be replaced at build time and resolves to if (false) {...} then the whole import will be eliminated.

import startMock from './mock'

// don't do any comparison here.
if (process.env.MOCK) {
    startMock()
}