5 ways to optimise Application Bundle Size of your React app

Photo by Lautaro Andreani on Unsplash

What is an Application Bundle?

An application bundle size includes all JavaScript code, libraries, and dependencies that are bundled together. End-user browser has to download this bundle to be able to use your application.

Why is Bundle Size important?

1. Large bundle size means longer load time. The time taken to download and execute the bundle can cost your app performance.
2. Faster applications provide a better user experience.
3. Small bundle size leads to better SEO ranking. Applications with shorter Time-to-Interactive (TTI) are ranked higher.

5 Ways to reduce Bundle Size:

Know your Application Bundle:

• First thing to do when optimising the Bundle Size is to check what is causing the chunky bundle. You can use webpack-bundle-analyzer to understand which parts of the app bundle need optimisation. It provides a treemap visualisation of all the contents in your app bundle.
• You can hover over each of the parts and know the stat (size before transformation like minification), parsed (size after transformation, JS code size parsed by client browser) and gzip size (size transmitted over the…