Webpack: come ottimizzare il bundle.js generato? È troppo grande nel mio caso

Question

Sono nuovo al Webpack. Io cerco di usare Webpack per due motivi principali:

• gestione dei componenti: usando require(...)
• Performance: dimensione più piccola possibile, meno richieste possibili al server.

Ma con l'applicazione ho appena iniziato (attualmente ci sono qualcosa come quattro Reagire componenti solo), il file generato da bundle.js Webpack è 3.87MB !!!

Sono abbastanza sicuro che Webpack raccolga cose che non avrò mai bisogno. Mi piacerebbe sapere come ottimizzare il file generato ... Come faccio a "debug" il processo di Webpack?

mio webpack.config.js:

var webpack = require("webpack"); 

module.exports = { 
    entry: "./app/bootstrap.js", 
    output: { 
     path: __dirname, 
     publicPath: "/public/", 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.css$/, 
       loader: "style!css" 
      }, 
      { 
       test: /\.js$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel-loader' 
      }, 
      { 
       test: /\.js$/, 
       include: /vis/, 
       loader: 'babel-loader' 
      }, 
      { 
       test: /\.(png|woff|woff2|eot|ttf|svg|gif|jpg|jpeg|bmp)(\?.*$|$)/, 
       loader: 'url-loader?limit=100000' 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery", 
      "window.jQuery": "jquery" 
     }), 
     new webpack.optimize.UglifyJsPlugin({minimize: true}) 
    ] 

}; 

e package.json:

{ 
    "name": "XXXXX", 
    "version": "1.0.0", 
    "main": "", 
    "scripts": { 
    "dev": "webpack --progress --colors --watch --devtool eval", 
    "prod": "webpack --progress --colors" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "alt": "^0.16.10", 
    "bootstrap": "^3.3.5", 
    "es6-promise": "^2.3.0", 
    "i18next-client": "^1.10.2", 
    "jquery": "^1.10.2", 
    "react": "^0.13.3", 
    "react-router": "^0.13.3", 
    "toastr": "^2.1.0", 
    "vis": "^4.4.0" 
    }, 
    "devDependencies": { 
    "css-loader": "^0.15.1", 
    "babel-core": "^5.6.18", 
    "babel-loader": "^5.3.1", 
    "es6-module-loader": "^0.17.3", 
    "extract-text-webpack-plugin": "^0.8.2", 
    "file-loader": "^0.8.4", 
    "node-libs-browser": "^0.5.2", 
    "webpack": "^1.9.13", 
    "url-loader": "^0.5.6", 
    "style-loader": "^0.12.3", 
    "webpack-dev-server": "^1.9.0" 
    } 
} 

Qualsiasi aiuto su come ottimizzare il generato bundle.js?

Answer 1

semplicemente

webpack --production 
or 
webpack -p 

un'occhiata a http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html

Answer 2

Aggiungere questo nel file di configurazione di produzione:

plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env': { 
     // This has effect on the react lib size 
     'NODE_ENV': JSON.stringify('production'), 
     } 
    }), 
    new ExtractTextPlugin("bundle.css", {allChunks: false}), 
    new webpack.optimize.AggressiveMergingPlugin(), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     mangle: true, 
     compress: { 
     warnings: false, // Suppress uglification warnings 
     pure_getters: true, 
     unsafe: true, 
     unsafe_comps: true, 
     screw_ie8: true 
     }, 
     output: { 
     comments: false, 
     }, 
     exclude: [/\.min\.js$/gi] // skip pre-minified libs 
    }), 
    new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]), //https://stackoverflow.com/questions/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack 
    new CompressionPlugin({ 
     asset: "[path].gz[query]", 
     algorithm: "gzip", 
     test: /\.js$|\.css$|\.html$/, 
     threshold: 10240, 
     minRatio: 0 
    }) 
    ],