Webpack：如何优化生成的bundle.js文件？在我的情况下，它太大了。

Question

我对Webpack还不熟悉。我试图使用Webpack的两个主要原因是：

• 组件管理：使用require(...)
• 性能：生成最小的文件大小，尽可能减少向服务器的请求。

但是，对于我刚刚开始的应用程序（目前仅有大约四个React组件），Webpack 生成的 bundle.js 文件大小为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文件？

- electrotype

---

嗨，感谢您的问题和答案。我遇到了同样的问题。您还发现了更多可以分享的信息吗？ - Herman Fransen

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。

- Whisher

---

使用这个标志，压缩到了2.01Mb，谢谢！但仍然很大。我要调查一下为什么...我猜我可能是问题的一部分！;-) - electrotype

记录一下：真正起作用的是去除“--devtool eval”标签，这样就不会生成源代码映射文件。（另外，你的“--production”标签中是否缺少了一个“c”？） - electrotype

这个“--production”标志在我的项目中没有任何帮助。大小从6.47M变成了6.47M。我在这里提出了我的问题http://stackoverflow.com/questions/40093936/react-redux-bundle-js-is-too-big - Dustin Sun

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://dev59.com/rF8e5IYBdhLWcg3wwMv8
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0
    })
  ],

- Khalid Azam

---

要让 Ignore 插件与 Webpack 2 兼容，请使用 new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)。 - Amio.io