Reduce webpack bundle size for production

No indroduction here, starting.

1. Use the right environment variable

new webpack.DefinePlugin({‘process.env’: {‘NODE_ENV’: ‘production’}})

2. Use production parameter

webpack -p

3. Advanced uglification

new UglifyJSPlugin({// options})

4. Optimizing dependencies import

Instead of import the full dependency:

import _ from ‘lodash’;

Just import what you really need:

import _ from ‘lodash/core’;

5. Use Bundle Analyzer to figure out what increases the size

e.g. Most of the time we should ignore the moment locale files

new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

6. Extract vendors out of your bundle

module.exports = {…,entry: {app: ‘./src/index.js’,vendor: [‘react’, ‘moment’, ‘lodash/core’]},…,plugins: […,new webpack.optimize.CommonsChunkPlugin({name: ‘vendor’})]};

7. Extract vendors out of your bundle

module.exports = {…,module: {rules: […,// css{test: /\.css$/,use: ExtractTextPlugin.extract({fallback: ‘style-loader’,use: [‘css-loader’]})}]},plugins: […,new ExtractTextPlugin(‘style.css’),]};

8. Code split by routes

• Webpack doc
• react-code-splitting

Result per step on one of my project

See ya.