Reactjs 通过网页包作出反应-生产标志增加文件大小

我对使用React和Webpack非常陌生，所以我可能做了一些错误的事情，但是当我使用-p生产标志构建时，我的文件大小要比不使用-p生产标志构建时大得多（3.26MB vs 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 }),
  ],
};

---

我也遇到了同样的问题，通过从webpack.conf.js中删除“debug”属性，问题得到了解决。在开发时（而不是在构建产品包时），我使用

-d

标记调用webpack，因为这会自动添加调试属性

---

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

我也遇到了同样的问题，并且通过从webpack.conf.js中删除“debug”属性得到了解决。在开发时（而不是在构建产品包时），我使用

-d

标记调用webpack，因为这会自动添加调试属性

---

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

当您打开包时，您能看到它确实被缩小了吗？另外，与您的问题分开，使用React时，您需要通过使用DefinePlugin将

process.env.NODE\u env

设置为production来确保产品版本已绑定，否则React运行时性能将大大降低。嗨@riscarrott-是的，它正在缩小。至于生产变量，我遇到过这个问题，但我无法确定应该在哪里设置它。提供有关在生产模式下编译React的一些信息。Re：尺码的差异很难知道原因。你能分享你的全部代码吗？@riscarrott我恐怕不能分享任何代码，因为它是用于工作项目的。尽管如此，无论我的代码由什么组成，当你打开包时，它会随着生产标志=/而变大，你能看到它确实被缩小了吗？另外，与你的问题分开，使用React时，您需要通过使用DefinePlugin将

process.env.NODE\u env

设置为production来确保产品版本已绑定，否则React运行时性能将大大降低。嗨@riscarrott-是的，它正在缩小。至于生产变量，我遇到过这个问题，但我无法确定应该在哪里设置它。提供有关在生产模式下编译React的一些信息。Re：尺码的差异很难知道原因。你能分享你的全部代码吗？@riscarrott我恐怕不能分享任何代码，因为它是用于工作项目的。尽管如此，不管我的代码由什么组成，它都带有生产标志，这似乎很奇怪=/