Skip to content
Conditional loader for react
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
.nvmrc
LICENSE
README.md
package.json
webpack.js
yarn-error.log
yarn.lock

README.md

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

In your webpack.config.js

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

You can’t perform that action at this time.