funbox/harold funbox/harold

  • Stars
    star
    241
  • Rank 161,489 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 3 years ago
  • Updated 7 months ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
funbox/harold
github

funbox

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Compares frontend project bundles

@funboxteam/harold

Harold avatar: Sad emoji with a smile mask on a face

npm

Harold is a CLI tool that compares frontend project bundles in size.

ะŸะพ-ั€ัƒััะบะธ

Rationale

The bundle size of an average frontend project grows on every change.

To feel the pain To make it easier to measure & compare the project size while refactoring or updating the deps, we've built Harold.

Demo

Demo GIF

The demo is accelerated. In real life setting up the dependencies and building a project takes forever.

Installation

npm install -g @funboxteam/harold

Commands

snapshot [options]

Builds the project and takes the snapshot.

Available options:

  • -o, --output <path> โ€” sets the snapshot output path; default is harold_snapshot_<date>_<time>.json;
  • -e, --exec <cmd> โ€” sets the building command; default is npm run build-production. The command will be run with NO_HASH=true env variable set;
  • -p, --path <path> โ€” sets the path of the build result directory, which will be used for snapshotting; default is public.

diff <left> <right>

Compares the passed snapshots.

help

Sends halp.

FAQ

How does it work?

When you take a snapshot, Harold runs the build command, waits until the project is building, then goes to the output directory and records the files' sizes. At the same time it creates the gzipped version of each file and records it's size too. After than it spits the snapshot โ€” JSON file with all the data.

Then, when you have two snapshots and run harold diff first.json second.json it compares the diff files and prints the overall comparison.

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

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

# Make some changes in the project

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

# 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)

What is NO_HASH?

Modern frontend bundlers may add hashes to the filenames to improve caching. But Harold compares files using their names. To improve the diff quality you should set up your bundler the way that turns off hashes when NO_HASH set.

Or you may just provide another env variable if you need:

WITHOUT_CONTENTHASH=true harold snapshot

How to make a snapshot without building a project?

Pass to --exec a fake command, such as echo 1.

What is โ€œJS (legacy)โ€?

Due to the variety of web browsers, nowadays frontenders have to support not only modern Chrome & Firefox, but also old dusty IE or Presto-based Opera. To make it easier for users with modern browsers to download assets, developers split the bundle on two parts: modern one & legacy one. The latter includes more polyfills, contains older JS syntax, etc.

Harold expects that in the case of legacy bundle existence, its files will be named as legacy.*.js. If there are such files, their stat will appear in โ€œJS (legacy)โ€ row.

Credits

The avatar for the project was made by Igor Garybaldi.

Sponsored by FunBox

More Repositories

1

optimizt

CLI image optimization tool
JavaScript
915
star
2

optimus

Command line arguments parser for Elixir
Elixir
176
star
3

smppex

โœ‰๏ธ SMPP 3.4 protocol and framework implementation in Elixir
Elixir
103
star
4

fitting

Library add improve test log for RSpec and WebMock, validate its according to API Blueprint and Open API, show the documentation coverage with log.
Ruby
46
star
5

beatrix

A tool to chop off useless fonts glyphs and convert TTF/OTF into WOFF & WOFF2
JavaScript
40
star
6

blueprinter

API Blueprint renderer to output documentation as an HTML page
JavaScript
34
star
7

talks

ะั€ั…ะธะฒ ั ะฟัƒะฑะปะธั‡ะฝั‹ะผะธ ะฒั‹ัั‚ัƒะฟะปะตะฝะธัะผะธ ะฝะฐัˆะธั… ัะพั‚ั€ัƒะดะฝะธะบะพะฒ
29
star
8

init-exporter

Utility for exporting services described by Procfile to init system
Go
27
star
9

phantom-lord

Handy API for Headless Chromium
JavaScript
26
star
10

chokecherry

Wrapper around lager logger which limits the volume of info messages irrespectively of the lager's backend
Erlang
26
star
11

diamonds

A pile of shiny typed JS helpers for everyday usage
TypeScript
21
star
12

smppsend

Command line tool for sending messages to SMSC through SMPP
Elixir
19
star
13

sidekiq-influxdb

Writes Sidekiq job execution metrics to InfluxDB
Ruby
18
star
14

webpack-dev-server-firewall

Prevents access to dev server from unknown IPs
JavaScript
17
star
15

chronos

One library to rule the time
TypeScript
17
star
16

shrine-webdav

Provides a simple WebDAV storage for Shrine
Ruby
17
star
17

plumbapius

Plugs and tools for validating HTTP requests and responses according to API Blueprint specs
Elixir
14
star
18

languagetool-node

CLI spell and grammar checker
JavaScript
13
star
19

crafter

API Blueprint parser written in pure JavaScript
JavaScript
12
star
20

esplanade

Validate requests and responses against API Blueprint specifications
Ruby
12
star
21

babel-plugin-typograf

Babel plugin for enhancing text punctuation and readability
JavaScript
11
star
22

tomograph

Convert API Blueprint, Swagger and OpenAPI to JSON Schema and search through it
Ruby
11
star
23

eslint-plugin-no-only-tests

Disallow the use of describe.only() and it.only()
JavaScript
10
star
24

markdown-lint

Markdown code style linter
JavaScript
10
star
25

scss-vars-loader

SCSS variables for BEM-blocks
JavaScript
9
star
26

scss-imports-loader

Global imports for SCSS files
JavaScript
8
star
27

eslint-config

ESLint rules that follow our style guide
JavaScript
8
star
28

vscode-apib-ls

API Blueprint language server
JavaScript
8
star
29

api-validator

A tool to validate server responses using API Blueprint documentation
JavaScript
7
star
30

face_control

Comment on problems in added lines of pull requests in Atlassian Bitbucket Server (formerly Stash)
Ruby
7
star
31

frontend-tests-runner

A library for running Mocha tests in parallel
JavaScript
6
star
32

loggun

ะŸั€ะธะฒะพะดะธั‚ ะปะพะณะธ ะฟั€ะธะปะพะถะตะฝะธั ะบ ะตะดะธะฝะพะผัƒ ั„ะพั€ะผะฐั‚ัƒ
Ruby
6
star
33

free-port-finder

Tiny utility for checking ports availability
JavaScript
6
star
34

stylelint-rules

A collection of SCSS rules missing in stylelint-scss
JavaScript
6
star
35

scss-lint-config

Config for Stylelint SCSS linting
JavaScript
6
star
36

bacula_exporter

Bacula exporter for Prometheus
Go
5
star
37

pipeline-heavy-job-plugin

This plugin allows defining job weight for pipeline projects as HeavyJob Plugin does for freestyle projects.
Java
5
star
38

rebuild-in-progress-webpack-plugin

Creates the file indicator at the beginning of the build and deletes it at the end
JavaScript
5
star
39

statesman-diagram

Generates DOT representations of Statesman machines and runs dot to render them to PNGs
Ruby
5
star
40

fazio

A tool to find an npm dep somewhere on your filesystem
JavaScript
5
star
41

piper

Utility for log rotation for 12-factor apps
Go
5
star
42

api-blueprint-tutorial

General information about API Blueprint tools in FunBox
JavaScript
5
star
43

eleb128

LEB128 Erlang implementation
Erlang
4
star
44

simplecov-bitbucket-server

Uploads test coverage data to Bitbucket Server via Code Coverage plugin
Ruby
4
star
45

activerecord-overflow_signalizer

Signalize when some primary key overflow soon
Ruby
4
star
46

dkrpm

Dockerized RPM building process powered by RPMBuilder
Shell
2
star
47

airborne_report

Generate reports on tests with the airborne gem
Ruby
2
star
48

qa-test

ะขะตัั‚ะพะฒะพะต ะทะฐะดะฐะฝะธะต ะดะปั QA
Ruby
2
star
49

dioxy

Aggregating proxy for MQTT broker metrics in JSON format
Go
1
star
50

api-blueprint

API Blueprint specification
1
star
51

capistrano-init-exporter

Capistrano bindings for the init-exporter utility
Ruby
1
star
52

scss-utils

A small set of SCSS mixins
SCSS
1
star