根据您的评论，您正在使用material-ui和react-bootstrap。这些依赖项由 webpack 与您的react和react-dom包捆绑在一起。任何时候你require或import一个包都被捆绑为你的包文件的一部分。

这是我的猜测。您可能正在使用库方式导入react-bootstrap和material-ui组件：

import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';

这很好也很方便，但它不仅捆绑Button和FlatButton（及其依赖项）而且整个库。

缓解它的一种方法是仅尝试import或require需要什么，例如组件方式。使用相同的示例：

import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';

这只会捆绑Button，FlatButton以及它们各自的依赖关系。但不是整个图书馆。所以我会尝试摆脱所有的库导入并使用组件方式。

如果您没有使用大量组件，那么它应该会大大减少捆绑文件的大小。

作为进一步的解释：

当您使用库方式时，您将导入所有这些 react-bootstrap和所有这些 material-ui组件，无论您实际使用的是哪些组件。

01/2017 编辑- 从那以后，我对不同的 Webpack 插件有了更多了解，并想对其进行更新。事实证明，UglifyJS有很多配置选项，这些选项似乎不是很主流，但可以对您的包大小产生巨大影响。这是我当前的配置，带有一些注释（网站上的文档很棒）：

 new webpack.optimize.UglifyJsPlugin({
      comments: false, // remove comments
      compress: {
        unused: true,
        dead_code: true, // big one--strip code that will never execute
        warnings: false, // good for prod apps so users can't peek behind curtain
        drop_debugger: true,
        conditionals: true,
        evaluate: true,
        drop_console: true, // strips console statements
        sequences: true,
        booleans: true,
      }
    })

我曾经遇到过一个uglify关于转义 unicode 字符的 -ication的晦涩问题，所以如果你使用这些转换可能会出现边缘情况，请注意。

您可以webpack在webpack 文档中阅读有关特定选项支持的更多信息，并提供一些后续链接以供进一步阅读。

（旁注：我认为你的 package.json 是混淆的......至少有一些开发依赖是我见过的每个 package.json 的依赖（例如，react-starter-kit）

如果您正在为制作做准备，则还应该采取更多步骤来减小文件大小。这是我的 webpack.config.js 的片段：

 plugins: [


        new webpack.optimize.UglifyJsPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        })
    ],

1) 缩小/丑化你的代码

2) 替换重复代码以最小化文件大小

3) 告诉 webpack 省略它用于节点环境构建的一些东西

最后，如果您使用源映射（您可能应该使用），您将需要添加适当的行。Sentry 写了一篇关于此的不错的博客文章。

在我的构建中，我使用 devtool:'source-map'用于生产

18 年 5 月更新： 更新 UglifyJsPlugin 设置以更好地缩小

我在生产代码中使用以下配置进行缩小。

 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,
        conditionals: true,
        unused: true,
        comparisons: true,
        sequences: true,
        dead_code: true,
        evaluate: true,
        if_return: true,
        join_vars: true
      },
      output: {
        comments: false,
      },
      exclude: [/\.min\.js$/gi] // skip pre-minified libs
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]), 
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0
    })
  ],

你有没有看过你的脚本是如何通过网络发送的......我有一些非常简单的react组件，每个组件大约 300kb，这是在 webpack 优化之后。在它们被压缩后，它们降到了 38kb。仍然相当可观 - 但这就是我们今天使用明天功能所得到的。如果您使用 node/express 来提供静态资源，包括您的 javascript - 查看压缩 ( https://github.com/expressjs/compression )。我还建议查看用于生产的节点最佳实践指南https://expressjs.com/en/advanced/best-practice-performance.html 如果您不通过节点提供文件，则使用 apache（或其他网络服务器）将有用于压缩基于文本的文件的选项。

我发现提及 source-map-explorer 实用程序很有用，它有助于了解您的 bundle.js 文件中的确切内容。它可以帮助您识别 bundle js 中是否有任何不必要的东西。您可以从 npm 安装 source-map-explorer 并使用它

source-map-explorer yourBundle.js

除此之外，正如@kimmiju 所提到的，检查您的服务器是否正在使用某种压缩。

您还可以尝试异步加载路由（在 webpack 中延迟加载），这样您的整个 bundlejs 文件就不会一次性发送，而是在用户导航到这些路由时分块发送。