Using tools to analyze webpack bundles

A major disadvantage of transpiling and using Polyfills is that the source code can diverge quite dramatically from the source code. This can often result in bloated bundle sizes. If you look at the file size of the bundle.js file after the Polyfill library was added (see the previous two recipes), then you'll see that it is over 200Kb. This is quite large when compared to 5Kb without the Polyfill.

With many bundles, it is difficult to find out what files are responsible for the large file size, and what the dependencies are between them.

In this recipe, we will see how to use analysis tools to get a better perspective on our webpack bundles.

Get ECMAScript Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.