Redux: Webpack compila bundle.js demasiado grande (en ejemplos)

No hay nada de malo en sí, los ejemplos simplemente no están configurados para producción. No es probable que hagamos esto aquí para evitar la carga de mantenimiento; consulte los modelos más completos de Webpack para obtener ejemplos de configuraciones de producción.

Como mínimo, querrá hacer esto en producción:

• cambiar devtool de 'eval' a 'source-map'
• agregue webpack.DefinePlugin para establecer process.env.NODE_ENV en 'production'
• agregue webpack.optimize.UglifyJsPlugin para la minificación
• asegúrese de llamar a Babel con NODE_ENV=production entonces .babelrc no habilita react-transform

Una configuración típica de producción de Webpack podría verse así:

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

Aquí hay una plantilla que incluye un modo de producción si está interesado.

La mejor forma debería ser AsyncRoute. Debemos agrupar la plantilla / css / js de un componente para evitar múltiples solicitudes, pero cargarlo a pedido.

Tener devtool como inline-source-map lugar de solo source-map también aumentará el volumen del archivo de salida al colocar el mapa de origen (sorpresa) en línea. Obvio, pero pasé por alto esto y me tomó una hora darme cuenta, así que lo estoy poniendo aquí para referencia futura general.