Redux: Webpack mengkompilasi bundle.js yang terlalu besar (dalam contoh)

Tidak ada yang salah, contohnya tidak dikonfigurasi untuk produksi. Kami tidak mungkin melakukan ini di sini untuk menghindari beban pemeliharaan—silakan lihat boilerplate Webpack yang lebih lengkap untuk contoh konfigurasi produksi.

Setidaknya Anda ingin melakukan ini dalam produksi:

• ubah devtool dari 'eval' menjadi 'source-map'
• tambahkan webpack.DefinePlugin untuk menyetel process.env.NODE_ENV ke 'production'
• tambahkan webpack.optimize.UglifyJsPlugin untuk minifikasi
• pastikan Anda memanggil Babel dengan NODE_ENV=production jadi .babelrc tidak mengaktifkan react-transform

Konfigurasi produksi Webpack khas mungkin terlihat seperti ini:

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

Berikut adalah boilerplate termasuk mode produksi jika Anda tertarik.

Cara terbaik adalah AsyncRoute. Kita harus menggabungkan template/css/js dari suatu komponen untuk menghindari banyak permintaan, tetapi memuatnya sesuai permintaan.

Memiliki devtool sebagai inline-source-map alih-alih hanya source-map juga akan mengelompokkan file output dengan meletakkan peta sumber (kejutan) inline. Jelas, tetapi saya mengabaikan ini dan saya butuh satu jam untuk mencari tahu, jadi saya meletakkannya di sini untuk referensi umum di masa mendatang