«   Previous tip Next tip   »

DevTools: A better to way to visualize your JavaScript

Last updated: 18th April 2023


The Lighthouse Treemap provides a graphical representation 📊 of your JavaScript bundles. Compatible with sourcemaps, it helps you understand the JavaScript modules used by your webpage. It can even show you unused bytes!

To try this out on a website:

  1. From the Lighthouse Panel in DevTools, run a Performance profile.
  2. In the resulting Lighthouse profile, click View Treemap.
Treemap position in lighthouse
  1. Explore the various parts which make up your bundle. You can also highlight unused bytes, and dive into code that uses sourcemaps.

What next

Good job on viewing the Lighthouse Treemap. From here, you can:

Source maps

With the help of sourcemaps, the visualization can display your original source files, such as TypeScript files. Exploring files within the node_modules is something I use a lot - to keep my bundles at a reasonable size. The visualization highlights third-party scripts that consume a significant amount of bytes.

Bonus tip

You can also run Lighthouse from the command line, and generate a Treemap report! This can be useful in a continuous integration environment.

Browser support

This feature works in the stable versions of Chrome and Edge.

«   Previous tip Next tip   »

Sign up to receive a developer tip, in the form of a gif, in your inbox each week