Webpack:如何优化生成的bundle.js？在我的情况下,这太大了

Question

我是Webpack的新手.我尝试使用Webpack主要有两个原因:

• 组件管理:使用 require(...)
• 性能:可能的最小尺寸,可能对服务器的请求较少.

但是我刚开始使用的应用程序(目前只有四个React组件),bundle.jsWebpack生成的文件是3.87Mb!

我很确定Webpack捆绑了我不需要的东西.我想知道如何优化生成的文件......如何"调试"Webpack的进程？

我的webpack.config.js:

var webpack = require("webpack");

module.exports = {
    entry: "./app/bootstrap.js",
    output: {
        path: __dirname,
        publicPath: "/public/",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style!css"
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader'
            },
            {
                test: /\.js$/,
                include: /vis/,
                loader: 'babel-loader'
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg|gif|jpg|jpeg|bmp)(\?.*$|$)/,
                loader: 'url-loader?limit=100000'
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        new webpack.optimize.UglifyJsPlugin({minimize: true})
    ]

};

并且package.json:

{
  "name": "XXXXX",
  "version": "1.0.0",
  "main": "",
  "scripts": {
    "dev": "webpack --progress --colors --watch --devtool eval",
    "prod": "webpack --progress --colors"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "alt": "^0.16.10",
    "bootstrap": "^3.3.5",
    "es6-promise": "^2.3.0",
    "i18next-client": "^1.10.2",
    "jquery": "^1.10.2",
    "react": "^0.13.3",
    "react-router": "^0.13.3",
    "toastr": "^2.1.0",
    "vis": "^4.4.0"
  },
  "devDependencies": {
    "css-loader": "^0.15.1",
    "babel-core": "^5.6.18",
    "babel-loader": "^5.3.1",
    "es6-module-loader": "^0.17.3",
    "extract-text-webpack-plugin": "^0.8.2",
    "file-loader": "^0.8.4",
    "node-libs-browser": "^0.5.2",
    "webpack": "^1.9.13",
    "url-loader": "^0.5.6",
    "style-loader": "^0.12.3",
    "webpack-dev-server": "^1.9.0"
  }
}

有关如何优化生成的任何帮助bundle.js？

Answer 1

只是

webpack --production
or
webpack -p

看看http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html

Answer 2

在生产配置文件中添加:

plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        // This has effect on the react lib size
        'NODE_ENV': JSON.stringify('production'),
      }
    }),
    new ExtractTextPlugin("bundle.css", {allChunks: false}),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      mangle: true,
      compress: {
        warnings: false, // Suppress uglification warnings
        pure_getters: true,
        unsafe: true,
        unsafe_comps: true,
        screw_ie8: true
      },
      output: {
        comments: false,
      },
      exclude: [/\.min\.js$/gi] // skip pre-minified libs
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]), //https://stackoverflow.com/questions/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0
    })
  ],