使用 Webpack 为 React 应用生产做好准备答案

【问题标题】：Getting React App Production Ready with Webpack使用 Webpack 为 React 应用生产做好准备
【发布时间】：2016-05-05 04:12:55
【问题描述】：

我对使用 Webpack 还是很陌生，我正在尝试将我的 React 应用在 ES6 中完成，使其达到可接受的生产就绪大小。输出文件仍然太大，而且 React 仍在输出警告（主要是关于生产文件）。

谁能帮我解决我的配置文件中应该更新的内容？

这是我目前拥有的。

var webpack = require('webpack');
var PROD = JSON.parse(process.env.PROD_ENV || '0');

module.exports = {
  entry: "./app/App.js",
  output: {
    filename: "public/bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  plugins: PROD ? [
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: true }
    })
  ] : []
}

【问题讨论】：

您可以做很多较小的调整，也许对于一个单一的答案来说太多了。我写过关于主题here 的文章。我认为将process.env.NODE_ENV 设置为production 到DefinePlugin 会很有帮助。你也可以考虑using react-lite or such。
我已经放弃了对 webpack 配置的思考，而是开始使用 hjs-webpack，它可以做所有的事情，让我把时间花在实际编写代码上 :)

标签： reactjs webpack production

【解决方案1】：

这是我的生产构建插件列表：

plugins: [
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.optimize.DedupePlugin(),
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('production')
    }
  }),
  new webpack.optimize.UglifyJsPlugin({
    minimize: true,
    compress: {
      unused: true,
      dead_code: true,
      warnings: false,
      screw_ie8: true
    },
    compressor: {
      warnings: false
    }
  })
]

此外，如果您发现应用程序仍然非常庞大，我使用的是 Webpack 包大小分析器 (npm.js link)。它将向您显示按大小排序的已用依赖项列表，它确实帮助我分析并丢弃了我实际上并不需要的东西。

【讨论】：

谢谢！把它降到 350k（看起来还是有点大，但好多了）。我将试用尺寸分析器，看看它是否有助于我优先考虑体面。