Hawkeye, the Ultimate esbuild Analyzer

Effortlessly analyze your JS bundles and uncover actionable insights to boost performance and enhance user experience.

ℹ️ While our blog primarily focuses on Angular, everything covered in this post works just as well with other JavaScript frameworks — and even vanilla JS!

In modern web development, performance is crucial for delivering a seamless user experience. Users expect fast-loading applications, and with the increasing complexity of modern apps, dependencies can pile up, resulting in bloated bundles.

Bundles are the packaged versions of your application code, created by combining multiple JavaScript, CSS, and other files into a single or smaller set of files. This process reduces the number of HTTP requests, speeding up load times.

Tools like esbuild play a significant role in this process by offering fast and efficient bundling and minification, optimizing your code by removing unused parts (dead code) and reducing its overall size.

However, even with powerful tools like esbuild, developers must be cautious about how they manage dependencies. Carelessly including third-party libraries can significantly inflate the bundle size, leading to slower load times and degraded user experience.

How to prevent big bundle sizes?

In Angular, the CLI provides helpful features like build budgets to alert you when your bundles exceed a specified size.

When you run ng build, the output highlights warnings or errors if the bundle surpasses these thresholds. Once a warning or error is triggered by the build budgets, it’s a clear signal to take action.

At this point, you should either analyze the last commit to identify changes that might have caused the increase or dig into your bundles to pinpoint what is contributing to the size issue.

To analyze and optimize our bundles, we can leverage several open-source tools. In the past, the Webpack Bundle Analyzer was a popular choice among developers for this purpose. However, with Angular’s switch to esbuild in version 17, alternative tools are now required to analyze bundles effectively. Some of…