babel-plugin-remove-react-element

This Babel plugin can be used to remove every usage of a react component from code. Used with webpack, this can be used to create a bundle for a mobile website and a desktop website.

Installation

npm install --save-dev babel-plugin-remove-react-element

Usage

Via .babelrc (Recommended)

.babelrc

{
    "plugins": [
        ["remove-react-element", { "elementNames": ["Desktop"] }]
    ]
}

Via Node API

require("@babel/core").transform("code", {
    "plugins": [
        ["remove-react-element", { "elementNames": ["Desktop"] }]
    ]
});

Example

In

    class MyPage extends Component {
        render() {
            return <div>
                <Desktop>
                    This will show on desktops.
                </Desktop>
                <Mobile>
                    This will show on mobile.
                </Mobile>
            </div>
        }
    }

Out

    class MyPage extends Component {
        render() {
            return <div>
                {null}
                <Mobile>
                    This will show on mobile.
                </Mobile>
            </div>
        }
    }

Why...

Consider the following react component... The code below can be compiled and bundled without remove-react-element. The resulting bundle would be a valid responsive website.

import MediaQuery from 'react-responsive';
import React, { Component } from 'react';

//The markup wrapped inside the <Desktop/> tag will only show
// if the width of the page is lower than 1224px.
class Desktop extends Component {
    render() {
        return <MediaQuery query="(min-device-width: 1224px)">
            { this.props.children }
        </MediaQuery>;
    }
}

//The markup wrapped inside the <Mobile/> tag will only show
// if the width of the page is lower than 1224px.
class Mobile extends Component {
    render() {
        return <MediaQuery query="(max-device-width: 1224px)">
            { this.props.children }
        </MediaQuery>;
    }
}

export class MyPage extends Component {
    render() {
        return <div>
            <Desktop>
                This will show on desktops.
            </Desktop>
            <Mobile>
                This will show on mobile.
            </Mobile>
        </div>
    }
}

But you might have a requirement to generate a smaller bundle for mobile devices. This bundle would not need to contain the markup related to desktop. This can be achieved with remove-react-element.

To achieve this, you can configure webpack as followed.

const webpack = require('webpack');
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    ...
    module: {
        rules: [
            {
                include: [
                    path.resolve('./src')
                ],
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            plugins: [
                                [
                                    "remove-react-element",
                                    { "elementNames": ["Desktop"] }
                                ]
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new UglifyJSPlugin({
            uglifyOptions: {
                beautify: true,
                ecma: 6,
                compress: true,
                comments: false
            }
        })
    ]
};

Once the plugin remove-react-element has removed all the usages of the Desktop components, uglifyjs will remove all the dead code... so all the unused components should be removed from the bundle.