3 Ways to Optimize Your React Bundle With Webpack

Webpack bundle analyzer, code-splitting, and more

Webpack asset collection

React applications contain many 3rd party libraries. Webpack is a great tool for bundling all the code you write, and the code others have written into an optimized bundle.

Webpack’s configuration is so feature-rich, it’s easy to miss some of the most effective tools it offers for optimization.

I wanted to share 3 of the best techniques I have come across to further optimize my project bundles.

This article assumes you have a basic working knowledge of Webpack.

1. Webpack Bundle Analyzer

Webpack Bundle Analyzer is a tool used to visualize the packages your application is using. It won’t directly reduce the size of your bundle, but it can show you how much space each package takes up. Being able to see how much space each package occupies can better inform where you put your optimization efforts.

To set up Bundle Analyzer, first, import the package.

npm install webpack-bundle-analyzer --save-dev