Redux: Webpack compiles too huge bundle.js (in examples)

There's nothing wrong per se, the examples are just not configured for production. We aren't likely to do this here to avoid the maintenance burden—please consult fuller Webpack boilerplates for examples of production configs.

At the very least you'll want to do this in production:

• change devtool from 'eval' to 'source-map'
• add webpack.DefinePlugin to set process.env.NODE_ENV to 'production'
• add webpack.optimize.UglifyJsPlugin for minification
• make sure you call Babel with NODE_ENV=production so .babelrc doesn't enable react-transform

A typical Webpack production config might look like this:

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

module.exports = {
  devtool: 'source-map',
  entry: [
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

Here is a boilerplate including a production mode if you're interested.

The best way should be AsyncRoute. We should bundle the template/css/js of a component together to avoid multiple requests, but load it on demand.

Having devtool as inline-source-map instead of just source-map will also bulk the output file by putting the source map (surprise) inline. Obvious, but I overlooked this and it took me an hour to figure out so I'm putting it here for general future reference