[react]项目从开发版本到生产版本

开发人员在开发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,参见另外的内容

你可能感兴趣的:([react]项目从开发版本到生产版本)