开发人员在开发react项目的时候可能为了编程需要,或者是调试需要,在代码的某些地方增加了后台打印,或者说是react给你发出了一些警告信息,等等。这些内容都不应该出现在生产环境中,所以我们可以使用一个插件来过滤出这些东西,以使得我们的生产版本更加的简洁高效。
一般而言,项目的打包工具有很多种类,这里说的是webpack打包工具构建生产版本。你需要知道webpack的两个插件:
UglifyJsPlugin 和 DefinePlugin。
如果在你操作之前并没有安装插件请先安装,UglifyJsPlugin简要步骤如下:
npm i -D uglifyjs-webpack-plugin
在webpack.config.js中配置:
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
//...
optimization: {
minimizer: [
new UglifyJsPlugin()
]
}
}
详细配置参数和内容参见( https://webpack.js.org/plugins/uglifyjs-webpack-plugin/ )。
DefinePlugin 安装配置比较繁琐,其主要配置内容参见( https://webpack.js.org/plugins/define-plugin/#src/components/Sidebar/Sidebar.jsx ),这里尚未去深究。
如果你在构建react项目使用的脚手架create-react-app构建,以上的配置内容已经配置到对应的文件之下。如果你查看不到对应的配置文件夹config,参见另外的内容