Google Chrome now has a JavaScript bundle visualizer

Posted . Visible to the public.

Similar to the Webpack Bundle Analyzer, Chrome's new Lighthouse feature …

… 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.

This is very helpful to visualize Javascript files in development. It also works on production code, where its usefulness depends on the structure of the productive Javascript code.

Warning

This will only work when your bundler emits source maps, which it may not do in production.
Also you should bundle in production mode so tree shaking Show archive.org snapshot is applied. Without tree shaking modules may appear larger than they end up.

Dominik Schöler
Last edit
Judith Roth
Keywords
bundle, size
License
Source code in this card is licensed under the MIT License.
Posted by Dominik Schöler to makandra dev (2021-11-02 13:34)