babel-plugin-transform-react-remove-prop-types

Remove unnecessary React propTypes from the production build.

Installation

npm install --save-dev babel-plugin-transform-react-remove-prop-types

The problem solved

Remove React propTypes from the production build, as they are only used in development. You can save bandwidth by removing them.

Example

In

const Baz = (props) => (
  <div {...props} />
);

Baz.propTypes = {
  className: PropTypes.string
};

Out

const Baz = (props) => (
  <div {...props} />
);

Usage

Via .babelrc (Recommended)

.babelrc

without options:

{
  "env": {
    "production": {
      "plugins": ["transform-react-remove-prop-types"]
    }
  }
}

with options:

{
  "env": {
    "production": {
      "plugins": [
        ["transform-react-remove-prop-types", {
          "mode": "wrap",
          "ignoreFilenames": ["node_modules"]
        }]
      ]
    }
  }
}

Via CLI

babel --plugins transform-react-remove-prop-types script.js

Via Node API

without options:

require('babel-core').transform('code', {
  plugins: [
    'transform-react-remove-prop-types',
  ],
});

with options:

require('babel-core').transform('code', {
  plugins: [
    [
      'transform-react-remove-prop-types',
      {
        mode: 'wrap',
        ignoreFilenames: ['node_modules'],
      },
    ],
  ],
});

Options

mode

• remove (default): the propTypes definitions are removed from the source code.
• wrap: the propTypes definitions are wrapped with the following code:

if (process.env.NODE_ENV !== "production") {
  // ...
}

The wrap mode is targeting react libraries like material-ui. It's not intended to be used in userland.

removeImport

• true: the import statements are removed as well. This option only works if mode is set to remove:

import PropTypes from 'prop-types'

• false (default): does not remove the import statements.

ignoreFilenames

This filter generates a regular expression. Any filenames containing one of the array's strings will be ignored. By default, we match everything.

Following the Is it safe? section, you might encounter a component depending on the propTypes at runtime to work. For this reason, we provide an array options to filter out some files and folders. For instance, you can ignore all the npm modules:

ignoreFilenames: ['node_modules'],

Is it safe?

If you are using the propTypes in a conventionnal way, i.e by using them to perform type checking on the properties, that plugin should be safe to use.

However, some libraries are accessing the propTypes on the component directly. For instance react-native-vector-icons use them to split the properties between two components:

const touchableProps = pick(restProps, Object.keys(TouchableHighlight.propTypes));

⚠️ The plugin is breaking that code if he end-up removing TouchableHighlight.propTypes.

Make sure you are:

• Not using that pattern in your souce code. If you do, explicitly export the propTypes to work around that limitation.
• Not parsing the node_modules. If you do, test that things are still working before shipping into production.

eslint-plugin-react has a rule forbid-foreign-prop-types that can help you make this plugin safer to use.

License

MIT