No indroduction here, starting. 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.

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Reduce webpack bundle size for production

Too Long; Didn't Read

_haochuan

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Reduce webpack bundle size for production

Too Long; Didn't Read

_haochuan

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES