Webpack 4 Optimization – Splitting Bundles

Webpack 4 already has some optimizations presets for production mode, such as the code minification (before it was made with UglifyJS), but there are more things we can use to improve the performance of our application. In this recipe, we are going to learn how to split bundles (vendors and application bundles), add source maps, and implement the BundleAnalyzerPlugin.

Getting Ready

For this recipe, we need to install the following packages:

npm install webpack-bundle-analyzer webpack-notifier

How to do it...

Let's add a source map to our Webpack:

1. Create the webpack/configuration/devtool.js file:

const isProduction = process.env.NODE_ENV === 'production';

export default !isProduction ? 'cheap-module-source-map' : 'eval';

File: webpack/configuration/devtool.js

2. Split the bundles (using the new "optimization" Webpack node): one for our /node_modules/ which will be the biggest one, and one for our React Application. You need to create the optimization.js file...