Redux: Webpack compila bundle.js muito grande (em exemplos)

Não há nada de errado em si, os exemplos simplesmente não estão configurados para produção. Não é provável que façamos isso aqui para evitar a carga de manutenção - consulte os boilerplates mais completos do Webpack para obter exemplos de configurações de produção.

No mínimo, você vai querer fazer isso na produção:

• mude devtool de 'eval' para 'source-map'
• adicione webpack.DefinePlugin para definir process.env.NODE_ENV para 'production'
• adicione webpack.optimize.UglifyJsPlugin para minificação
• certifique-se de chamar Babel com NODE_ENV=production então .babelrc não ativa react-transform

Uma configuração de produção típica do Webpack pode ter a seguinte aparência:

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

Aqui está um clichê incluindo um modo de produção, se você estiver interessado.

A melhor maneira deve ser AsyncRoute. Devemos empacotar o template / css / js de um componente para evitar múltiplas solicitações, mas carregá-lo sob demanda.

Ter devtool como inline-source-map vez de apenas source-map também irá aumentar o arquivo de saída, colocando o mapa de origem (surpresa) embutido. Óbvio, mas esqueci isso e levei uma hora para descobrir, então estou colocando aqui para referência futura geral