Meet Harold — CLI tool for comparing bundles in size (and feeling the pain)

#javascript #webdev #showdev #webperf

TL;DR: Find the demo GIF at the end of the article!

Do you know that feeling when you've just updated the deps in your frontend project, and its bundle doubled in size? Well, I know it too. It's called “pain”.

I don't know what to do with this pain, but I want to know what happens with my project when I update the deps, refactor big components, rewrite it to the new version of the framework, etc. Most of the time I fired ls -la in the output directory of the master branch, then run it again in the current branch, and compared the logs side by side in an editor. Also I gzipped all the files and compared their sizes too.

Well, it was even more painful than looking at the bloated bundle. Of course there're some ways to make it easier, e.g. use webpack-bundle-analyzer, or something else. But I wanted to have something that clearly shows the difference between the bundles. Thus, I asked my teammate if he had any ideas. And he had!

So, meet Harold — the tool that helps you to feel the pain of bloated bundles!

How Harold works

Let's suppose you've updated your project's framework and want to find the difference between the builds.

First of all you open the project directory, checkout to the original version of the project (let's say it's stored in master branch), and take a snapshot:

# Open your project folder
$ cd ~/my-syper-kewl-project/

# Checkout to the original version
$ git checkout master

# Take the first snapshot
$ harold snapshot -o before.json

Harold builds your project and creates a “snapshot” of the output directory: it records all the files' sizes, then gzips all of them and record gzips' sizes too.

Then you checkout to the new branch where you've changed the project, updated everything you wanted to, etc. And take a second snapshot:

# Checkout to the updated version
$ git checkout improvement/framework-update

# Take the second snapshot
$ harold snapshot -o after.json

Now, finally, you ask Harold to find the difference between the snapshots and...

BOOM!

# Compare them
$ harold diff before.json after.json

Snapshots:
 Left: 11/10/2020 6:30:56 PM • my-syper-kewl-project • master
 Right: 11/10/2020 6:45:13 PM • my-syper-kewl-project • improvement/framework-update

Build time:
 16 seconds slower (Left: 129 seconds, Right: 145 seconds)

Diff by category:
 ————————————————————————————————————————————————————————————————————————————————————
                before              after               Changes
 ————————————————————————————————————————————————————————————————————————————————————
  JS            1.04 MB (270 kB)    1.12 MB (294 kB)    +78.2 kB (+23.7 kB), +1 item
 ————————————————————————————————————————————————————————————————————————————————————
  JS (legacy)   1.07 MB (285 kB)    1.16 MB (314 kB)    +90.6 kB (+28.6 kB), +1 item
 ————————————————————————————————————————————————————————————————————————————————————
  CSS           144 kB (23.4 kB)    144 kB (23.4 kB)    No changes
 ————————————————————————————————————————————————————————————————————————————————————
  Images        5.26 MB (5.23 MB)   5.26 MB (5.23 MB)   No changes
 ————————————————————————————————————————————————————————————————————————————————————
  Fonts         159 kB (159 kB)     159 kB (159 kB)     No changes
 ————————————————————————————————————————————————————————————————————————————————————
  Videos        1.59 MB (1.58 MB)   1.59 MB (1.58 MB)   No changes
 ————————————————————————————————————————————————————————————————————————————————————
  Other         127 kB (13.2 kB)    127 kB (13.3 kB)    +364 B (+82 B)
 ————————————————————————————————————————————————————————————————————————————————————

  Total         9.4 MB (7.56 MB)    9.57 MB (7.61 MB)   +169 kB (+52.4 kB), +2 items
 ————————————————————————————————————————————————————————————————————————————————————

Diff by files:
 m public: +169 kB (+52.4 kB)
 m public/10.js: +16 B (+4 B)
 m public/11.js: -20 B (-3 B)
 + public/12.js: 301 B (143 B)
 m public/3.js: +1.84 kB (+621 B)
 m public/app.js: +4.18 kB (+843 B)
 m public/legacy.10.js: +42 B (+18 B)
 + public/legacy.12.js: 513 B (148 B)
 m public/legacy.3.js: +1.9 kB (+634 B)
 m public/legacy.app.js: +6.83 kB (+1 kB)
 m public/legacy.vendor.js: +81.3 kB (+26.8 kB)
 m public/legacy.vendor.js.LICENSE: +182 B (+41 B)
 m public/vendor.js: +72.2 kB (+22.1 kB)
 m public/vendor.js.LICENSE: +182 B (+41 B)