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.

Reduce webpack bundle size for production

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Redux For Dummies

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

Redux For Dummies

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps