react with webpack 给了我一个巨大的 bundle.js 文件答案

【问题标题】：react with webpack gives me a massive bundle.js filereact with webpack 给了我一个巨大的 bundle.js 文件
【发布时间】：2016-11-04 08:33:51
【问题描述】：

好的，我在这里阅读了很多关于优化 bundle.js 以用于生产构建的帖子 (like this one)，但他们根本没有更改我的 bundle.js 文件，所以我一定做错了什么。我正在使用命令构建：

webpack -p --config webpack.production.config.js

webpack.production.config.js 看起来像这样：

var webpack = require('webpack');
var path = require('path');

module.exports = {
  devtool: 'inline-source-map',
  entry: [
    './src/index.js'
  ],
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  resolve: {
    modulesDirectories: ['node_modules', 'src'],
    extensions: ['', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015']
      }
    ]
  },
  alias: {
        'react$': path.join(__dirname, 'node_modules', 'react','dist','react.min.js'),
        'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist','react-dom.min.js')
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
  ],
};

我很茫然。我有 17 个 node_modules，包括所有基础知识，如 react 和 webpack。我的 bundle.js 文件是 15.6MB....绝对庞大且不可接受。从我正在阅读的内容来看，它看起来像 -p 和这个插件

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

应该自动使用 .min.js 版本的一切。那是对的吗？我必须做些什么来强制我的应用程序使用它吗？

任何优化都会有很大帮助！应用程序并没有那么大，页面的初始加载需要很长时间。

谢谢！！

【问题讨论】：

查看webpack.github.io/docs/code-splitting.html

标签： reactjs webpack bundle

【解决方案1】：

对于生产版本，请尝试将 devtool: 'inline-source-map' 更改为 devtool: 'source-map'

https://webpack.github.io/docs/configuration.html 的 webpack 配置说：

inline-source-map - 将 SourceMap 作为 DataUrl 添加到 JavaScript 文件。

此外，对于生产版本，您可以在加载程序部分删除“react-hot”。

例如，由于我的一个项目存在这些差异，开发包为 9MB，而生产包为 600KB。希望您会看到类似的改进。

【讨论】：

【解决方案2】：

我强烈推荐你阅读this教程，看完这篇答案就很明显了。

简单地说，你可以使用一个名为 uglify 的插件，它可以显着减小包的大小。另外'NODE_ENV': JSON.stringify('production')是React使用的，与webpack无关

【讨论】：