Search code examples
javascriptreactjswebpacktree-shaking

Specify which React components to be added to bundle

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

Solution

  • Solved the problem using webpack's define plugin.