How it works...

In step 2, we ran the webpack command and output statistics in a JSON file. This data includes information such as file size contribution and dependencies. The sites we opened up read that JSON data and produced a visualization. The first site, WEBPACK VISUALIZER (https://chrisbateman.github.io/webpack-visualizer/), uses the file size data and emphasizes how much each package contributes to the overall bundle size. This is useful for identifying the culprits when it comes to inflated bundle sizes.

Unfortunately, removing a large dependency isn't always easy. Dependencies can be multiple levels-deep and difficult to find. Once we know what is contributing to large bundle sizes, then we can use the second tool, Webpack Visualizer, ...

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.