{"id":13492802,"url":"https://github.com/funbox/harold","last_synced_at":"2025-04-05T17:04:08.565Z","repository":{"id":42687167,"uuid":"312006933","full_name":"funbox/harold","owner":"funbox","description":"Compares frontend project bundles","archived":false,"fork":false,"pushed_at":"2023-10-02T10:21:16.000Z","size":1069,"stargazers_count":241,"open_issues_count":1,"forks_count":2,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-02-25T10:27:49.702Z","etag":null,"topics":["bundle-size","parcel","rollup","web-optimization","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/funbox.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-11-11T15:12:37.000Z","updated_at":"2024-07-04T20:22:59.000Z","dependencies_parsed_at":"2024-01-14T16:21:26.168Z","dependency_job_id":"a3e7eced-58f7-48ac-9566-6adbabd77306","html_url":"https://github.com/funbox/harold","commit_stats":{"total_commits":109,"total_committers":5,"mean_commits":21.8,"dds":"0.24770642201834858","last_synced_commit":"f788f637d2abec3c76926b1252db36fc0d98021c"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funbox%2Fharold","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funbox%2Fharold/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funbox%2Fharold/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funbox%2Fharold/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/funbox","download_url":"https://codeload.github.com/funbox/harold/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369953,"owners_count":20927928,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bundle-size","parcel","rollup","web-optimization","webpack"],"created_at":"2024-07-31T19:01:09.304Z","updated_at":"2025-04-05T17:04:08.529Z","avatar_url":"https://github.com/funbox.png","language":"JavaScript","readme":"# ⛔ THIS REPO IS UNMAINTAINED\n\nFuture development moved to \u003chttps://github.com/343dev/harold\u003e.\n\n# @funboxteam/harold\n\n\u003cimg align=\"right\" width=\"192\" height=\"192\"\n     alt=\"Harold avatar: Sad emoji with a smile mask on a face\"\n     src=\"./logo.png\"\u003e\n     \n[![npm](https://img.shields.io/npm/v/@funboxteam/harold.svg)](https://www.npmjs.com/package/@funboxteam/harold)\n\n**Harold** is a CLI tool that compares frontend project bundles in size.\n\n[По-русски](./README.ru.md)\n\n## Rationale\n\nThe bundle size of an average frontend project grows on every change. \n\n~~To feel the pain~~ To make it easier to measure \u0026 compare the project size while refactoring or updating the deps, \nwe've built Harold.\n\n## Demo\n\n\u003cimg align=\"center\"\n     alt=\"Demo GIF\"\n     src=\"./demo.gif\"\u003e\n     \n\u003csmall\u003e\u003ci\u003eThe demo is accelerated. In real life setting up the dependencies and building a project takes forever.\u003c/i\u003e\u003c/small\u003e\n\n## Installation\n\n```bash\nnpm install -g @funboxteam/harold\n```\n\n## Commands\n\n### snapshot \\[options\\]\n\nBuilds the project and takes the snapshot.\n\nAvailable options:\n\n- `-o, --output \u003cpath\u003e` — sets the snapshot output path; default is `harold_snapshot_\u003cdate\u003e_\u003ctime\u003e.json`;\n- `-e, --exec \u003ccmd\u003e` — sets the building command; default is `npm run build-production`. The command will be run with\n`NO_HASH=true` env variable set;\n- `-p, --path \u003cpath\u003e` — sets the path of the build result directory, which will be used for snapshotting; \n  default is `public`.\n\n### diff \\\u003cleft\\\u003e \\\u003cright\\\u003e\n\nCompares the passed snapshots.\n\n### help\n\nSends halp.\n\n## FAQ\n\n### How does it work?\n\nWhen you take a snapshot, Harold runs the build command, waits until the project is building, then goes to the output \ndirectory and records the files' sizes. At the same time it creates the gzipped version of each file and records \nit's size too. After than it spits the snapshot — JSON file with all the data.\n\nThen, when you have two snapshots and run `harold diff first.json second.json` it compares the diff files and prints\nthe overall comparison.\n\n\u003cdetails\u003e\n  \u003csummary\u003eUsage example\u003c/summary\u003e\n\n  ```bash\n  # Open your project folder\n  $ cd ~/my-syper-kewl-project/\n  \n  # Take the first snapshot\n  $ harold snapshot -o before.json\n  \n  # Make some changes in the project\n  \n  # Take the second snapshot\n  $ harold snapshot -o after.json\n  \n  # Compare them\n  $ harold diff before.json after.json\n  \n  Snapshots:\n   Left: 11/10/2020 6:30:56 PM • my-syper-kewl-project • master\n   Right: 11/10/2020 6:45:13 PM • my-syper-kewl-project • improvement/framework-update\n  \n  Build time:\n   16 seconds slower (Left: 129 seconds, Right: 145 seconds)\n  \n  Diff by category:\n   ————————————————————————————————————————————————————————————————————————————————————\n                  before              after               Changes\n   ————————————————————————————————————————————————————————————————————————————————————\n    JS            1.04 MB (270 kB)    1.12 MB (294 kB)    +78.2 kB (+23.7 kB), +1 item\n   ————————————————————————————————————————————————————————————————————————————————————\n    JS (legacy)   1.07 MB (285 kB)    1.16 MB (314 kB)    +90.6 kB (+28.6 kB), +1 item\n   ————————————————————————————————————————————————————————————————————————————————————\n    CSS           144 kB (23.4 kB)    144 kB (23.4 kB)    No changes\n   ————————————————————————————————————————————————————————————————————————————————————\n    Images        5.26 MB (5.23 MB)   5.26 MB (5.23 MB)   No changes\n   ————————————————————————————————————————————————————————————————————————————————————\n    Fonts         159 kB (159 kB)     159 kB (159 kB)     No changes\n   ————————————————————————————————————————————————————————————————————————————————————\n    Videos        1.59 MB (1.58 MB)   1.59 MB (1.58 MB)   No changes\n   ————————————————————————————————————————————————————————————————————————————————————\n    Other         127 kB (13.2 kB)    127 kB (13.3 kB)    +364 B (+82 B)\n   ————————————————————————————————————————————————————————————————————————————————————\n  \n    Total         9.4 MB (7.56 MB)    9.57 MB (7.61 MB)   +169 kB (+52.4 kB), +2 items\n   ————————————————————————————————————————————————————————————————————————————————————\n  \n  Diff by files:\n   m public: +169 kB (+52.4 kB)\n   m public/10.js: +16 B (+4 B)\n   m public/11.js: -20 B (-3 B)\n   + public/12.js: 301 B (143 B)\n   m public/3.js: +1.84 kB (+621 B)\n   m public/app.js: +4.18 kB (+843 B)\n   m public/legacy.10.js: +42 B (+18 B)\n   + public/legacy.12.js: 513 B (148 B)\n   m public/legacy.3.js: +1.9 kB (+634 B)\n   m public/legacy.app.js: +6.83 kB (+1 kB)\n   m public/legacy.vendor.js: +81.3 kB (+26.8 kB)\n   m public/legacy.vendor.js.LICENSE: +182 B (+41 B)\n   m public/vendor.js: +72.2 kB (+22.1 kB)\n   m public/vendor.js.LICENSE: +182 B (+41 B)\n  ```\n\u003c/details\u003e\n\n### What is `NO_HASH`?\n\nModern frontend bundlers may add hashes to the filenames to improve caching. But Harold compares files using\ntheir names. To improve the diff quality you should set up your bundler the way that turns off hashes when `NO_HASH` set.\n\nOr you may just provide another env variable if you need:\n\n```bash\nWITHOUT_CONTENTHASH=true harold snapshot\n```\n\n### How to make a snapshot without building a project?\n\nPass to `--exec` a fake command, such as `echo 1`.\n\n### What is “JS (legacy)”?\n\nDue to the variety of web browsers, nowadays frontenders have to support not only modern Chrome \u0026 Firefox, but also\nold dusty IE or Presto-based Opera. To make it easier for users with modern browsers to download assets,\ndevelopers split the bundle on two parts: modern one \u0026 legacy one. The latter includes more polyfills, \ncontains older JS syntax, etc. \n\nHarold expects that in the case of legacy bundle existence, its files will be named as `legacy.*.js`. If there are such \nfiles, their stat will appear in “JS (legacy)” row.   \n\n## Credits\n\nThe avatar for the project was made by [Igor Garybaldi](http://pandabanda.com/).\n\n[![Sponsored by FunBox](https://funbox.ru/badges/sponsored_by_funbox_centered.svg)](https://funbox.ru)\n","funding_links":[],"categories":["JavaScript","Tools to monitor the bundle size"],"sub_categories":["Webpack"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffunbox%2Fharold","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffunbox%2Fharold","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffunbox%2Fharold/lists"}