App-Produktion mit Webpack reaktivieren

Question

Ich bin ziemlich neu in der Verwendung von Webpack und versuche, meine React-App in ES6 in eine akzeptable Produktionsgröße umzusetzen. Die Ausgabedatei ist immer noch viel zu groß und auch React gibt immer noch Warnungen aus (hauptsächlich über Produktionsdateien).

Kann mir jemand bei der Fehlersuche helfen, was in meiner Konfigurationsdatei aktualisiert werden sollte?

Dies ist, was ich derzeit habe.

var webpack = require('webpack'); 
var PROD = JSON.parse(process.env.PROD_ENV || '0'); 

module.exports = { 
    entry: "./app/App.js", 
    output: { 
    filename: "public/bundle.js" 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
      presets: ['react', 'es2015'] 
     } 
     } 
    ] 
    }, 
    plugins: PROD ? [ 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { warnings: true } 
    }) 
    ] : [] 
} 

Answer 1

Hier ist meine Liste von Plugins für die Produktion baut: Außerdem

plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.DefinePlugin({ 
    'process.env': { 
     'NODE_ENV': JSON.stringify('production') 
    } 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
    minimize: true, 
    compress: { 
     unused: true, 
     dead_code: true, 
     warnings: false, 
     screw_ie8: true 
    }, 
    compressor: { 
     warnings: false 
    } 
    }) 
] 

, wenn Sie feststellen, dass die Anwendung noch ziemlich groß ist, habe, was ich verwendet der Analysator Webpack Bündelgröße ist (npm.js link). Es zeigt Ihnen die Liste der verwendeten Abhängigkeiten sortiert nach Größe, es hat mir wirklich geholfen, Dinge zu analysieren und wegzuwerfen, die ich eigentlich nicht brauchte.