通过 Webpack 做出反应 - 生产标志会增加文件大小答案

【问题标题】：React via Webpack - Production flag increases file size通过 Webpack 做出反应 - 生产标志会增加文件大小
【发布时间】：2016-05-10 14:20:08
【问题描述】：

我对使用 React 和 Webpack 还很陌生，所以我可能做错了什么，但是当我使用 -p 生产标志构建时，我的文件大小比没有构建时要大得多（3.26MB 对 2.23MB） .

package.json:

{
  "name": "myProject",
  "version": "0.0.1",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "babel-loader": "^6.2.0",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.3.13",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "flux": "^2.1.1",
    "history": "^1.17.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-router": "^1.0.3",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.1"
  },
  "devDependencies": {},
  "scripts": {
    "dev": "webpack-dev-server --content-base src --inline --hot",
    "build": "webpack",
    "build-p": "webpack -p"
  },
  "author": ""
}

webpack.config.js：

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/app.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "app.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

【问题讨论】：

当你打开包时你能看到它肯定被缩小了吗？
另外，与您的问题不同的是，在使用 React 时，您需要通过使用 DefinePlugin 将 process.env.NODE_ENV 设置为生产来确保将生产版本捆绑在一起，否则 React 运行时性能会相当慢。 facebook.github.io/react/downloads.html#npm
嗨@riscarrott - 是的，它正在被缩小。至于生产变量，我遇到过，但我一直无法弄清楚我应该在哪里设置它。
dev.topheman.com/… 提供了一些关于在生产模式下编译 React 的信息。回复：尺寸差异很难知道为什么。你能分享你的完整代码吗？
@riscarrott 恐怕我不能分享任何代码，因为它是用于工作中的项目的。不过，无论我的代码包含什么，这似乎很奇怪，它带有生产标志 =/

标签： reactjs webpack build-tools

【解决方案1】：

我遇到了同样的问题，通过从 webpack.conf.js 中删除“调试”属性得到了解决。相反，我在开发时（而不是在构建生产包时）使用 -d 标志调用 webpack，因为它会自动添加调试属性。

我看到调试是您配置中的一个条件，但至少它为我解决了问题。

【讨论】：