根据React关于PropTypes的文档:请注意,出于性能原因,propTypes仅在开发模式下检查。然而,当我用Webpack构建我的应用程序时,我看到我定义的propType仍然在最终的bundle中。我正在将NODE_ENV设置为生产环境。这种行为是预期的吗?我的理论是:PropTypes验证被跳过,尽管PropType定义仍然在生产代码中。如果这个理论是正确的,那么有没有在生产代码中剥离PropType的最佳实践?
propTypes
cs7cruho1#
Babel插件可以做到这一点:https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types
dnph8jn42#
您自己组件上的propTypes确实保留在所有构建中,但在构建React时将NODE_ENV设置为production时不会进行验证。你可以做的是用“老派”的方式定义你的propType(而不是作为类属性),并且有条件地这样做。
NODE_ENV
production
class MyComponent extends React.Component { render() { ... } } if (process.env.NODE_ENV !== 'production') { MyComponent.propTypes = { text: React.PropTypes.string.isRequired, }; }
字符串如果您使用DefinePlugin,Webpack将评估是否为if (false) { ... },然后Uglify将完全删除它。它并没有使代码变得更漂亮,你不能提取行为,因为它必须是明确的Webpack和Uglify做删除,但它工作。另一个更高级的选择是编写自己的Babel插件,例如。有one out there,但它已经将近一年没有更新了,所以我怀疑它是否仍然适用于Babel 6。它并不复杂,可能是一个有趣的练习。
DefinePlugin
if (false) { ... }
zrfyljdw3#
面对同样的问题,babel插件https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types对我不起作用(不支持打字)。我发现的更好的“肮脏黑客”:
MyComponent['propTypes'] = {...};
字符串
3条答案
按热度按时间cs7cruho1#
Babel插件可以做到这一点:
https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types
dnph8jn42#
您自己组件上的
propTypes
确实保留在所有构建中,但在构建React时将NODE_ENV
设置为production
时不会进行验证。你可以做的是用“老派”的方式定义你的propType(而不是作为类属性),并且有条件地这样做。
字符串
如果您使用
DefinePlugin
,Webpack将评估是否为if (false) { ... }
,然后Uglify将完全删除它。它并没有使代码变得更漂亮,你不能提取行为,因为它必须是明确的Webpack和Uglify做删除,但它工作。
另一个更高级的选择是编写自己的Babel插件,例如。有one out there,但它已经将近一年没有更新了,所以我怀疑它是否仍然适用于Babel 6。它并不复杂,可能是一个有趣的练习。
zrfyljdw3#
面对同样的问题,babel插件https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types对我不起作用(不支持打字)。
我发现的更好的“肮脏黑客”:
字符串