未捕获的错误：React 正在生产模式下运行，但代码无效

Question

当我在生产中部署我的项目时，出现这个错误：

未捕获的错误：React 正在生产模式下运行，但未应用死代码消除。阅读如何为生产正确配置 React：

我的 webpack 文件在插件部分有这个代码：

 `new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
  }),
  new webpack.optimize.AggressiveMergingPlugin(),
  new webpack.optimize.UglifyJsPlugin({
    minimize: true
  }),
  new CompressionPlugin({
    asset: '[path].gz[query]',
    algorithm: 'gzip',
    test: /\.js$|\.css$|\.html$/,
    threshold: 10240,
    minRatio: 0.8
  })`

谢谢你的帮助

Answer 1

Michal Zalecki 有一篇非常好的文章，介绍了如何使用 Webpack 优化 React 进行生产：

https://michalzalecki.com/optimize-react-build-for-production-with-webpack/#remove-dead-code-with-tree-shaking

根据此处给出的错误，有两件事需要检查。

1）首先应该是删除最小化选项。

这将允许您进入生产包以查看插入的 /* 未使用的和谐导出事实 */ 注释。

如果那些没有被插入，我会进入你的 Bable 配置并确保代码在 es2015 预设下正确转译。Tree Shaking 仅适用于 ES2015 模块。

2）如果您还没有这样做，我也一定要包含 source-map devtool 选项。源地图很酷，但我会让 teamtreehouse 的朋友解释一下原因：

http://blog.teamtreehouse.com/introduction-source-maps