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)
Demo
But talk is cheap, check out this cool demo GIF!
Get more about Harold in the Github repo:
Top comments (2)
That final frame in the gif... ππππ
That's just how we felt when had built the tool and decided to check one of our PRs with React update π