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.

Redux For Dummies

Too Long; Didn't Read

Make resilience your competitive advantage

Reduce webpack bundle size for production

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

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

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

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps