Redux: Webpack компилирует слишком большой файл bundle.js (в примерах)

В этом нет ничего плохого, примеры просто не настроены для продакшена. Мы вряд ли сделаем это здесь, чтобы избежать бремени обслуживания - обратитесь к более полным шаблонам Webpack для примеров производственных конфигураций.

По крайней мере, вы захотите сделать это в продакшене:

• изменить devtool с 'eval' на 'source-map'
• добавьте webpack.DefinePlugin чтобы установить process.env.NODE_ENV в 'production'
• добавить webpack.optimize.UglifyJsPlugin для минификации
• убедитесь, что вы вызываете Babel с помощью NODE_ENV=production поэтому .babelrc не включает react-transform

Типичная производственная конфигурация Webpack может выглядеть так:

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

Вот шаблон, включающий производственный режим, если вам интересно.

Лучшим способом должен быть AsyncRoute. Мы должны связать шаблон / css / js компонента вместе, чтобы избежать множественных запросов, но загружать его по запросу.

Использование devtool качестве inline-source-map вместо простого source-map также приведет к увеличению объема выходного файла, поместив исходную карту (сюрприз) в строку. Очевидно, но я пропустил это, и мне потребовался час, чтобы понять, поэтому я помещаю это здесь для общего использования в будущем.