To try this out on a website:
- From the Lighthouse Panel in DevTools, run a Performance profile.
- In the resulting Lighthouse profile, click View Treemap.
- Explore the various parts which make up your bundle. You can also highlight unused bytes, and dive into code that uses sourcemaps.
Good job on viewing the Lighthouse Treemap. From here, you can:
- Select specific bundles you want to dive into.
- Navigate between different files, within those different bundles.
- Highlight the unused bytes within bundles.
- View detailed coverage statistics in the coverage area located near the bottom of the page.
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.
You can also run Lighthouse from the command line, and generate a Treemap report! This can be useful in a continuous integration environment.
This feature works in the stable versions of Chrome and Edge.