Redux: Webpack 编译太大的 bundle.js（在示例中）

本身没有错，只是没有为生产配置示例。 我们不太可能在这里这样做以避免维护负担——请参阅更完整的 Webpack 样板以获取生产配置的示例。

至少你会想在生产中做到这一点：

• 将devtool从'eval'更改'source-map'
• 添加webpack.DefinePlugin以将process.env.NODE_ENV为'production'
• 添加webpack.optimize.UglifyJsPlugin进行缩小
• 确保你用NODE_ENV=production调用 Babel 这样.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也将通过将源映射（惊喜）内联来批量输出文件。 很明显，但我忽略了这一点，我花了一个小时才弄明白，所以我把它放在这里以供将来参考