«   Previous tip Next tip   »

Chrome DevTools: Visualise your JavaScript bundles

Last updated: 5th November 2021
Visualise your JavaScript bundles


The Lighthouse Treemap shows a visualisation 📊 of your JavaScript bundles. It's compatible with sourcemaps and is great for understanding large JavaScript modules used by your page. It can also visualise unused bytes.

How to use the Lighthouse Treemap

To use the Lighthouse Treemap feature:

  1. With DevTools open, use the shortcut Cmd + Shift + P and search for Lighthouse.
  2. With the Lighthouse Panel open, enable the Performance category and select Generate report.
  3. With the performance report open, select View Treemap.

Nice work! You can now see a Lighthouse Treemap. At this point, you can do the following:



This feature is currently in Chrome Stable, tested in version 95.

Further Resource

You can capture code coverage metrics while you make a Performance recording.

«   Previous tip Next tip   »

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