webpack-conditional-loader-react
Inspired by and modified from webpack-conditional-loader to work with react and the block comments used within JSX, conditional loader decides if a given block should be included in the final bundle.
Useful for removing instrumentation code and making your final production bundle smaller (therefore faster).
Installation
yarn add webpack-conditional-loader-react
or
npm install --save-dev webpack-conditional-loader-react
Usage
webpack.config.js
In your Put webpack-conditional-loader-react
as the last loader in the array, so it will process the code before
all others.
module: rules: test: /\.js$/ use: 'babel-loader' 'webpack-conditional-loader-react'
Get an example config file here
On your code
Use {/*#if expression*/}
and {/*#endif*/}
to wrap blocks of code you want to be removed if a given
predicate is false.
<Fragment> Dashboard Component /*#if process.NODE_ENV === 'development'*/ <p>I am here for development purposes only</p> /*#endif*/ /*#if process.NODE_ENV !== 'development'*/ <p>I am here for everyones purposes</p> /*#endif*/ </Fragment>
In the example above, the code will be removed if the enviroment variable NODE_ENV
is not
develpment
, removing unnecessary code from your production bundle.
The same technique can be used to prevent loading packages in the production bundle.
Credits
Reme Le Hane · GitHub RemeJuan · Twitter @RemeJuan