How to analyze Closure Compiler bundle size

Question

I have an app in ClojureScript, which uses Google's Closure Compiler as a compiler backend. The resulting bundle using advanced optimizations seems way too big for what it is. I blame the dependencies but how do I find out which modules are taking the most bytes in the output bundle? I scanned through all the Closure Compiler options and didn't find anything useful. Then I tried to learn about source maps and use that to calculate individual module size but with no success.

I would like a tree-like output where I can dig in and find the biggest modules in terms of size, eg.

• [+] goog 100kb
  • [+] goog.net 30kb
• [+] react 90kb
• [+] my 50kb
  • [+] my.namespace 30kb

Answer 1

shadow-cljs can generate Build Reports which take the advanced compiled output and analyze the source maps and then combines it with some of the compiler information to group sources by artifact and so on. The report is generated as a standalone .html file.

A sample build report can be found here. The build included "antd" package from npm. A comparison report that just included "antd/es/button" can be found here.

Note that this is limited to shadow-cljs as it relies on having all source map data available. Analyzing the source maps of CLJS builds generated by other tools misses source maps for all CLJSJS content and thus will include a lot of "gaps".

Answer 2

To my knowledge, such a tool does not exist. It would be an excellent one to have though.

The tool need not be specific to Closure Compiler. Instead, analyzing the output source map could attribute specific symbols in the code to specific input files.