Webpack4 在生产模式下，不会在 React.Component 状态下丑化变量名？

Question

在生产模式下，webpack 4 不会更改 React 组件状态中的变量名称。

我尝试 "uglifyjs-webpack-plugin": "^2.1.3", 但没有什么不同。

例如，

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  // ...
}

我想在生产中，状态名称 count 被丑化了。我期待类似的东西，

this.state = {c:props.initialCount};

webpack.config.js如下， // 加载包

const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

//定义路径

const STATIC_DIR = path.resolve(__dirname,
    'static',
    'app', 'js');
const SOURCE_DIR = path.resolve(STATIC_DIR, 'src');

module.exports = {
    mode: "production",
    devtool: 'source-map',

//定义条目

    entry: {
        plugin: path.resolve(SOURCE_DIR, 'index.js')
    },

//定义输出

    output: {
        filename: '[name]-2.4.0.js',
        path: STATIC_DIR
    },

这是重要的部分，

    module: {
        rules: [
            {
                test: /\.jsx?/,
                include: SOURCE_DIR,
                use: {
                    loader: 'babel-loader',
                    options: {
                        // compact: false,
                        // presets: ["es2015", "react"],
                        plugins: ['transform-class-properties']
                    }
                }
            }
        ]
    },
    externals: {
        jquery: 'jQuery'
    }
};

Answer 1

你可以这样设置条件

if (process.env.NODE_ENV === "production") {
    this.state = {c:props.initialCount};     //execute in production time
} else {
    this.state = {count: props.initialCount};
}

Answer 2

不幸的是，我认为这不会发生。丑化者不可能知道this.state是怎么用and的。例如，您可以以动态方式对其进行索引：

this.state = {count: 8};
console.log(this.state['c' + 'ount']);  // 8

即使它可以理解组件内不会发生这种情况，您也可以这样做

somethingElse(this.state);

无论 somethingElse() 是什么，如果它的键被缩小，它可能无法成为 this.state 的正面或反面。

我不推荐它，但是以迂回的方式实现这一点的一种方法是使用字符串变量作为键和 computed property names –

const COUNT_KEY = (process.env.NODE_ENV === "production" ? 'c' : 'count');
this.state = {[COUNT_KEY]: 8};
console.log(this.state[COUNT_KEY]);

这可能会被丑化成例如这在生产中：

const t = "c";
this.state = {[t]: 8};
console.log(this.state[t]);

Webpack4 在生产模式下，不会在 React.Component 状态下丑化变量名？

Webpack4 in production mode, does not uglify variable names in state of a React.Component?

production

reactjs

webpack