Redux: Webpack kompiliert zu große Bundle.js (in Beispielen)

An sich ist nichts auszusetzen, die Beispiele sind nur nicht für die Produktion konfiguriert. Wir werden dies hier wahrscheinlich nicht tun, um den Wartungsaufwand zu vermeiden. Beispiele für Produktionskonfigurationen finden Sie in den ausführlicheren Webpack-Boilerplates.

Zumindest möchten Sie dies in der Produktion tun:

• ändere devtool von 'eval' in 'source-map'
• füge webpack.DefinePlugin , um process.env.NODE_ENV auf 'production'
• füge webpack.optimize.UglifyJsPlugin für die Verkleinerung hinzu
• Stellen Sie sicher, dass Sie Babel mit NODE_ENV=production anrufen, damit .babelrc react-transform nicht aktiviert

Eine typische Webpack-Produktionskonfiguration könnte wie folgt aussehen:

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

Hier ist eine Boilerplate mit einem Produktionsmodus, wenn Sie interessiert sind.

Der beste Weg sollte AsyncRoute sein. Wir sollten das Template/css/js einer Komponente bündeln, um mehrere Anfragen zu vermeiden, aber es bei Bedarf laden.

Wenn devtool als inline-source-map anstelle von nur source-map wird, wird auch die Ausgabedatei gestapelt, indem die Quellzuordnung (Überraschung) inline eingefügt wird. Offensichtlich, aber ich habe das übersehen und ich habe eine Stunde gebraucht, um es herauszufinden, also stelle ich es hier als allgemeine Referenz für die Zukunft ein