尝试捆绑第一个 React 应用程序 - 捆绑太大

Question

我有第一个反应应用程序 - 使用开发人员模式和开发工具时为 5.5Mb："源映射"。现在我尝试像这样为分发模式编写 webpack：

var webpack = require('webpack');
var path = require('path');
var fs = require('fs')
var BUILD_DIR = path.resolve(__dirname, 'public/javascripts');
var APP_DIR = path.resolve(__dirname, 'frontend');
const babelSettings = JSON.parse(fs.readFileSync(".babelrc"))
var config = {
    entry: APP_DIR + '/app.jsx',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js',
    },
    module : {
        loaders : [
            {
                test : /.jsx?/,
                include : APP_DIR,
                use : ['babel-loader']
            }
            ,
            {
                test: /.css$/,
                use: ["style-loader",{
                    loader: "css-loader",
                    options: {
                        minimize: true
                    }
                }],
            },
            {
                test: /.less$/,
                use: ["style-loader,less-loader"]
            },
            {
                test: /.svg$/,
                loaders: [
                    {
                        loader: 'babel-loader',
                        query: {
                            presets: ['es2015']
                        }
                    },
                    {
                        loader: 'react-svg-loader',
                        query: {
                            jsx: true
                        }
                    }
                ],
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                screw_ie8: true
            }
        })
    ]
};
babelSettings.plugins.push("transform-react-inline-elements");
babelSettings.plugins.push("transform-react-constant-elements");

module.exports = config;

我用：

webpack --config webpack-dist.config.js -p --progress  --production --optimize-minimize

输出仍然是2.2Mb，这是不可接受的大小。我错过了什么配置？

Edit packages.json 看起来像这样：

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-3": "^6.22.0",
    "babelify": "^7.3.0",
    "browserify": "^13.3.0",
    "css-loader": "^0.28.0",
    "exorcist": "^0.4.0",
    "gulp-livereload": "^3.8.1",
    "gulp-sourcemaps": "^2.4.0",
    "less": "^2.7.2",
    "less-loader": "^2.2.3",
    "react-edit-inline": "^1.0.8",
    "react-image-fallback": "^4.0.1",
    "react-scripts": "0.8.5",
    "redux-devtools-extension": "^2.13.0",
    "remote-redux-devtools": "^0.5.0",
    "riek": "^1.0.7",
    "style-loader": "^0.13.1",
    "svg-react-loader": "^0.4.0-beta.2",
    "vinyl-buffer": "^1.0.0",
    "watchify": "^3.8.0",
    "webpack": "^2.3.2"
  },
  "dependencies": {
    "axios": "^0.16.0",
    "barcoder": "^2.0.1",
    "escape-string-regexp": "^1.0.5",
    "frisbee": "^1.1.7",
    "i18next": "^5.0.0",
    "i18next-browser-languagedetector": "^1.0.1",
    "i18next-xhr-backend": "^1.3.0",
    "immutability-helper": "^2.1.1",
    "lodash": "^4.17.4",
    "qrcode.react": "^0.6.1",
    "rc-time-picker": "^2.3.3",
    "react": "^15.4.2",
    "react-autosuggest": "^8.0.0",
    "react-bootstrap": "^0.30.7",
    "react-cards": "^0.2.2",
    "react-collapse": "^2.3.3",
    "react-cookie": "^1.0.4",
    "react-dom": "^15.4.2",
    "react-dropzone": "^3.10.0",
    "react-height": "^2.2.0",
    "react-highlight-words": "^0.6.0",
    "react-i18next": "^2.0.0",
    "react-infinite-scroller": "^1.0.4",
    "react-input-autosize": "^1.1.0",
    "react-isolated-scroll": "^0.1.0",
    "react-loaders": "^2.3.0",
    "react-motion": "^0.4.7",
    "react-number-input": "^15.0.0-rc2",
    "react-numeric-input": "^2.0.7",
    "react-popover": "^0.4.4",
    "react-preload": "^0.5.0",
    "react-redux": "^5.0.2",
    "react-redux-form": "^1.5.4",
    "react-router-dom": "^4.0.0",
    "react-select": "^1.0.0-rc.3",
    "react-svg-loader": "^1.1.1",
    "react-switch-button": "^2.1.1",
    "react-tabs": "^0.8.2",
    "react-tagsinput": "^3.14.0",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0",
    "simple-react-pdf": "^1.0.6",
    "style-it": "^1.5.5",
    "throttle-debounce": "^1.0.1",
    "validator": "^6.2.1"
  },

Answer 1

使用优秀的 Webpack 捆绑分析器来查看构建中占用空间的内容。

另外，在运行 webpack 之前尝试设置NODE_ENV=production，这会有所不同。

Answer 2

为

我(使用 Webpack 4(减小捆绑包大小的内容正在增加

module.exports = {
    mode: 'production', // ← this
    ...
}

(在 webpack.config 中.js(。从近 1 MB 到 158 kB。