react with webpack gives me a massive bundle.js file

Question

Ok I have read many posts(like this one) on here about optimizing bundle.js for a production build but they are not changing my bundle.js file at all so I must be doing something wrong. I am building with the command:

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

and webpack.production.config.js looks like this:

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
      }
    })
  ],
};

I am at a loss. I have 17 node_modules including all the basics like react and webpack. My bundle.js file is 15.6MB....absolutely massive and unacceptable. From what I am reading it looks like the -p and this plug in

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

should automatically use the .min.js version of everything. Is that correct? Do I have to do anything to force my application to use that?

Any optimization would help tremendously! The application is not really that large and the initial load of the page is taking WAY to long.

Thanks!!

Look into https://webpack.github.io/docs/code-splitting.html — lux, Jul 01 '16 at 23:00

score 1 · Answer 1 · answered Jul 02 '16 at 08:59

For a production build try changing devtool: 'inline-source-map' to devtool: 'source-map'

The webpack config from https://webpack.github.io/docs/configuration.html says:

inline-source-map - A SourceMap is added as DataUrl to the JavaScript file.

Also, and again for production builds, you can remove 'react-hot' in the loaders section.

For example, with these differences in one of my projects the development bundle is 9MB but the production one is 600KB. Hopefully you'll see similar improvements.

score 0 · Answer 2 · answered Jul 02 '16 at 12:58

I highly recommend you read this tutorial,the answer is very obvious after reading this.

Put simply ,you can use a plugin named uglify which can reduce the bundle size dramatically. In addition, 'NODE_ENV': JSON.stringify('production') is used by React ,nothing to do with webpack

react with webpack gives me a massive bundle.js file

2 Answers2