Optimizing the bundle size

As you develop and grow a MERN application, chances are the size of the bundles produced with Webpack will also grow, especially if large third-party libraries are used. Larger bundle sizes will effect performance and increase the initial load time of the application. We can make changes in the code to ensure we don’t end up with large bundles and also utilize features packed in Webpack 4 to help optimize bundling. In this section, we will highlight some key concepts that can give us control in producing smaller bundles and decreasing load time.

Note

Before going into the code to update it for bundle size optimization, you can also get familiar with the default optimization options that are now part of Webpack 4. In the MERN applications, we used the mode config to utilize the default settings for both development and production mode. To get an overview of the options available, check out this article at https://medium.com/webpack/webpack-4-mode-and-optimization...