0

I have a components_settings file that describes a list of components that shall be included in the production bundle, this file should be read by webpack during the build process, e.g.

{
  RedButton:false,
  BlueButton:true
}

I have both of these files available as .jsx components, and I do not want the code for those components to be included in my production bundle, if they are set to false in the components_settings file.

I read about tree shaking and managed to eliminate the code if it's unused, but when I try to conditionally render such as {process.env.NODE_ENV == "development" ? <RedButton /> : null}, in production bundle the code is still included :/

I am open for other/better solutions if tree shaking is wrong approach here. Thank you for any help

the_dude
  • 39
  • 8
  • what you are building is a library or an application? – PlayMa256 Sep 04 '18 at 11:32
  • it's an application which should be flexible with what components to be included in it's production bundle – the_dude Sep 04 '18 at 14:32
  • there is no way to do that with webpack. Webpack reads over your dependency tree and bundles the files that you had imported. What you can do is try to do code splitting and have those files required ONLY when they are necessary. You cannot say: "don't use this" – PlayMa256 Sep 04 '18 at 15:22
  • are there other ways of doing it without webpack then? I am ok with other solutions as long as I can choose what modules or "code" to be included in production build through some settings file – the_dude Sep 09 '18 at 11:47
  • One thing I have noticed is, if I import an unused variable then it won't show up in the bundle, but doing the same for a React element is not the case, it still shows up :/, what could be causing that? – the_dude Sep 09 '18 at 11:56

2 Answers2

0

Take a look at Loadable (https://github.com/jamiebuilds/react-loadable). It should work great for the code splitting you are looking for and this is also included in the majority of the boilerplate.

Mosè Raguzzini
  • 15,399
  • 1
  • 31
  • 43
0

Solved the problem using webpack's define plugin.

the_dude
  • 39
  • 8