Conditional Import still part of bundle in Webpack

Question

I am trying to load a module conditionally and the condition seems to work however webpack still makes the conditional module part of the bundle when the condition is false, here is the import code:

if (process.env.FEAT_SUPPORT === 'on') {
  require('feature');
  console.log('Enabled')

} else {
  console.log('disabled')
}

Even if the value is not 'on' it still requires the module. I tested this using the log lines and the correct log lines appear when it is on and off.

I am using the Webpack define plugin to set the variable. The main reason for doing the above is to keep the bundle size small and it doesn't seem to be doing it.

Add something that does dead code elimination (webpack.optimize.UglifyJsPlugin). — Yury Tarabanko
– Yury Tarabanko, Commented Mar 6, 2018 at 17:14
I use the webpack production build which doe the optimise and minimise, it removes dead code but doesn't do it for the above case — iQ.
– iQ., Commented Mar 7, 2018 at 12:20

halfer · Accepted Answer · 2018-03-29 22:33:44Z

3

(Posted answer on behalf of the question author).

So the above code was almost right, I need to remove the expression and simply use a if(process.env.FEAT_SUPPORT) where FEAT_SUPPORT is replaced by either 'true' or 'false'

answered Mar 29, 2018 at 22:33

community wiki

halfer

Sign up to request clarification or add additional context in comments.

2 Comments

ESR Over a year ago

I didn't think this worked - good to know! Been searching for a way to conditionally prevent packages from being bundled for ages.

Drazen Bjelovuk Over a year ago

This unfortunately doesn't seem to work with CRA, since it sets the environment variables as strings and TerserPlugin/UglifyJsPlugin only seem to recognize dead code with explicit booleans.

felixmosh · Accepted Answer · 2018-03-06 17:40:09Z

1

require by design can be invoked in any place in the code, so this will add a new module inside the bundle. If you want to split that require into a separate file you should use require.ensure method, that webpack will split it out for you.

You can use as well the new ES6 import() syntax, that will create the same result.

Please read: dynamic-imports chapter in the webpack docs.

answered Mar 6, 2018 at 17:40

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

4 Comments

iQ. Over a year ago

So what I want is still a single bundle and not split into any new files. I wanted my build to generate the bundle with the required module or exclude it based on a build time flag.

felixmosh Over a year ago

In that case, u should use DefinePlugin, that will change your If to false / true, and then with a combination of UglifyJsPlugin, it will be removed in production mode.

iQ. Over a year ago

So that is what I am doing, the if condition does become false yet the bundle size does not change. I use the webpack -p build which the docs says it uses UglifyJsPlugin, are you recommending I add Uglify separately?

felixmosh Over a year ago

No need, the plugin is enough, you can search for that if in the minified bundle to check if definePlugin is worked.

Collectives™ on Stack Overflow

Conditional Import still part of bundle in Webpack

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related