Remove unnecessary React propTypes from the production build.
npm install --save-dev babel-plugin-transform-react-remove-prop-types
Remove React propTypes
from the production build, as they are only used in development.
You can save bandwidth by removing them.
In
const Baz = (props) => (
<div {...props} />
);
Baz.propTypes = {
className: PropTypes.string
};
Out
const Baz = (props) => (
<div {...props} />
);
.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"]
}]
]
}
}
}
babel --plugins transform-react-remove-prop-types script.js
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'],
},
],
],
});
remove
(default): thepropTypes
definitions are removed from the source code.wrap
: thepropTypes
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.
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'],
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));
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.
MIT