使用 webpack-uglify 和禁用源映射可以大大提高输出到合理的大小（对于 hello world 应用程序约 140kbs）

几个步骤：

设置devtool在配置的WebPack到cheap-source-map或cheap-module-source-map使地图不与输出捆绑来源：

{
  eval: 'cheap-source-map'
}

激活 uglify 插件或使用-p参数调用 webpack

plugins: [
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  })
]

为生产定义节点环境会导致 webpack 删除测试助手并优化输出大小：

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('production')
    },
  })
]

注意：这些步骤应该只用于生产构建，因为它们会增加构建时间。

资源：https : //medium.com/modus-create-front-end-development/optimizing-webpack-production-build-for-react-es6-apps-a637e5692aea#.bug2p64de

在我看来，您只是有很多依赖项。在现代 JS 开发中，很容易过火并将每个库都包含在阳光下。人们往往会忘记，如果他们包含库 X，他们也会包含它的依赖项。

我唯一可以推荐的是仔细阅读每一个并评估它实际上是多么有用。如果您只是使用大型库的一小部分，请尝试用较小的库替换它，或者推出您自己的解决方案。

也许你可以在这里找到替代品：microjs

这是我将 js 从大约 3MB 减少到 350KB 的插件代码：

plugins: debug ? [] : [ new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': '"production"' } }), new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ mangle: true, sourcemap: false, compress: { warnings: false, } }), ]

看看browserify-shim。该库可帮助您使用 CDN 将依赖项外包。因此，您编译的文件中的依赖项较少。