Useful tools for analyzing
Webpack builds

This is a very quick walk-through of a few free tools you can use to analyze your Webpack build in real-time.

Webpack is becoming an industry standard for web development asset bundling.

Under the complicated hood of the tool, we developers tend to want to know more about file size and dependencies as project scales. Things can get out of hand if you're not too careful.

File size in particular is one I'm constantly aware of for the fact that it usually means your app/website will respond slower for end users if files reach a certain size. Tools exist to help you gain more background as to why the sizes increase.

Much of the inspiration for this walk-through comes from an article I found previously. Hat tip to Prateek Choudhary for the great article!

Gaining this knowledge will help you better understand ways to circumvent a large bundle size should you need to.

Tools used in this guide are:

• Webpack vizualizer
• Webpack Bundle Analyzer
• Bundle Phobia