Dev Tips: DevTools: Visualise your JavaScript bundles 📊

Dev Tips

 

DevTools: Visualise your JavaScript bundles 📊

 

Introduction

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:

  • Filter by individual bundles.
  • Visualise the unused bytes in the JavaScript files.
  • You can select individual files to dive deeper into them.
  • You can view detailed coverage stats in the coverage section near the bottom of the page.


Bonus

  • Thanks to sourcemaps, the visualisation can show you your original source files, for example your TypeScript files.
  • It can be very helpful to dive into the files part of the node_modules folder. The visualisation clearly shows which third-party scripts occupy a large amount of bytes.
  • You can run Lighthouse from the command line to see the treemap from a report.


Availability

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.

Email Marketing Powered by Mailchimp

Copyright © 2021 Umar, All rights reserved.
You are receiving this email because you signed up for Dev Tips.

unsubscribe from this list    update subscription preferences 

Key phrases

Older messages

DevTips: DevTools: Easily change CSS units and values 🔢

Monday, October 18, 2021

Dev Tips DevTools: Easily change CSS units and values 🔢 Hey all, hope you have a great week! Introduction Changing CSS values/units ( 10px / 1rem / 20vh ) can be cumbersome. Canary DevTools has some

Dev Tips: DevTools: Better accessibility inspection with the Source Order Viewer

Friday, July 30, 2021

Dev Tips DevTools: Better accessibility inspection with the Source Order Viewer 🔎 View this online: umaar.com/dev-tips/245-source-order-viewer / tweet Introduction The Source Order Viewer shows you the

DevTips: DevTools: Easily control typography with the CSS Font Editor 🖊

Friday, July 23, 2021

Dev Tips DevTools: Easily control typography with the CSS Font Editor 🖊 Introduction The Font Editor within the Styles Pane helps you to quickly change typography on a web page - using a visual tool

Dev Tips: DevTools: Using the CSS Grid & Flexbox Editor

Friday, July 16, 2021

Dev Tips DevTools: Better Debugging with the CSS Grid & Flexbox Editor ✨ Hey friends. I took a break from emailing for a while, but I'm grateful to have you all here, part of this amazing Dev

Dev Tips: Only download JavaScript when it is appropriate

Wednesday, December 16, 2020

Learn a few techniques for selectively downloading web page resources Dev Tips Hey everyone! I have a different sort of tip for you today, hope it's useful. JavaScript: Conditional JavaScript, only

Apple Vision Pro, MacBook Air & iOS 17 🌎, StackOverflow moderator strike 👨‍💻, CSS blend modes 🎨

Tuesday, June 6, 2023

Apple's augmented reality headset, the Apple Vision Pro, will launch early next year starting at $3499. Sign Up|Jobs|Advertise|View Online TLDR Together With CleanMyMac X TLDR 2023-06-06 Mac full

Digest #106: I love git-blame-someone-else! 😳

Tuesday, June 6, 2023

Digest #106: I love git-blame-someone-else! 😳 #106: I love git-blame-someone-else! This week, I've compiled yet another selection of the latest insights, tutorials, and tools in the DevOps space

[New post] Microsoft .NET Code Analysis: The Rijndael and Rijndaelmanaged Types Are Superseded

Tuesday, June 6, 2023

dotNetDave posted: " Since September 2021, the Rijndael and RijndaelManaged types have been superseded by the AesManaged type. Although Rijndael is still supported in .NET, it is generally not

The Rust I wanted had no future — and Our right to challenge junk patents is under threat

Monday, June 5, 2023

Issue #1154 — Top 20 stories of June 06, 2023 Issue #1154 — June 06, 2023 You receive this email because you are subscribed to Hacker News Digest. You can open it in the browser if you prefer. 1 The

Here’s all of TechCrunch’s reporting from day one of WWDC 2023

Monday, June 5, 2023

TechCrunch Newsletter TechCrunch logo The Daily Crunch logo By Christine Hall Monday, June 05, 2023 Today, our team brings you all of the ooey, gooey Apple WWDC 2023 keynote goodness, including

JSK Daily for Jun 5, 2023

Monday, June 5, 2023

JSK Daily for Jun 5, 2023 View this email in your browser A community curated daily e-mail of JavaScript news Mini-Game Using Only HTML, CSS and JavaScript Start by creating an HTML file and open it in

Max Q - Max Q: Another day, another delay

Monday, June 5, 2023

TechCrunch Newsletter TechCrunch logo Max Q logo By Aria Alamalhodaei Monday, June 05, 2023 Hello and welcome back to Max Q! In this issue: Pixxel's new investor Mission delays for Boeing, Rocket

Daily Coding Problem: Problem #1118 [Easy]

Monday, June 5, 2023

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Dropbox. What does the below code snippet print out? How can we fix the anonymous

Physical vs. Digital Games: Should You Buy Physical Games?

Monday, June 5, 2023

Did You Know?: The enormous geodesic polyhedron, Spaceship Earth, at the center of Walt Disney World's Epcot park, is clad in 11324 silvered isosceles triangles. If a perfect polyhedron, it would

DeveloPassion's Newsletter #124 - Polywork

Monday, June 5, 2023

Hello everyone! I'm Sébastien Dubois, your host (I'm on Twitter). You're receiving this email because you signed up for DeveloPassion's Newsletter. Thank you for being here with me ✨