Webpack: Wie optimiert man das generierte bundle.js? Es ist viel zu groß in meinem Fall

Question

Ich bin neu bei Webpack. Ich versuche Webpack aus zwei Gründen zu verwenden:

• Component Management: kleinste Größe möglich, weniger Anfragen möglich an den Server: require(...)
• Leistung verwenden.

Aber mit der Anwendung, die ich gerade erst begonnen (derzeit gibt es so etwas wie vier Komponenten reagieren nur), die bundle.js Datei von Webpack erzeugt 3.87MB ist !!!

Ich bin ziemlich sicher, dass Webpack Dinge bündelt, die ich nie brauchen werde. Ich würde gerne wissen, wie man die generierte Datei optimiert ... Wie kann ich den Webpack-Prozess "debuggen"?

Mein 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}) 
    ] 

}; 

und 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" 
    } 
} 

Jede Hilfe, wie die erzeugte bundle.js zu optimieren?

Answer 1

einfach

webpack --production 
or 
webpack -p 

einen Blick auf http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html

Answer 2

Fügen Sie diese in Ihrer Produktion config-Datei:

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 
    }) 
    ],