{"id":16347741,"url":"https://github.com/privatenumber/webpack-distsize","last_synced_at":"2026-04-18T10:33:01.925Z","repository":{"id":54763938,"uuid":"267235167","full_name":"privatenumber/webpack-distsize","owner":"privatenumber","description":"Track Webpack output size via version control","archived":false,"fork":false,"pushed_at":"2021-01-31T00:39:39.000Z","size":620,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2024-12-28T06:24:45.933Z","etag":null,"topics":["distribution","size","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/privatenumber.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-27T06:07:41.000Z","updated_at":"2021-03-09T23:31:34.000Z","dependencies_parsed_at":"2022-08-14T02:10:13.780Z","dependency_job_id":null,"html_url":"https://github.com/privatenumber/webpack-distsize","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/privatenumber%2Fwebpack-distsize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/privatenumber%2Fwebpack-distsize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/privatenumber%2Fwebpack-distsize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/privatenumber%2Fwebpack-distsize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/privatenumber","download_url":"https://codeload.github.com/privatenumber/webpack-distsize/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239566754,"owners_count":19660351,"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":["distribution","size","webpack"],"created_at":"2024-10-11T00:45:33.749Z","updated_at":"2025-11-09T04:30:32.881Z","avatar_url":"https://github.com/privatenumber.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webpack Distsize \u003ca href=\"https://npm.im/webpack-distsize\"\u003e\u003cimg src=\"https://badgen.net/npm/v/webpack-distsize\"\u003e\u003c/a\u003e \u003ca href=\"https://npm.im/webpack-distsize\"\u003e\u003cimg src=\"https://badgen.net/npm/dm/webpack-distsize\"\u003e\u003c/a\u003e \u003ca href=\"https://packagephobia.now.sh/result?p=webpack-distsize\"\u003e\u003cimg src=\"https://packagephobia.now.sh/badge?p=webpack-distsize\"\u003e\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/privatenumber/webpack-distsize/raw/master/.github/screenshot.png\" width=\"70%\"\u003e\n  \u003cbr\u003e\n  \u003ci\u003eTrack Webpack output size via version control\u003c/i\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  \u003csub\u003eIf you like this project, please star it \u0026 \u003ca href=\"https://github.com/privatenumber\"\u003efollow me\u003c/a\u003e to see what other cool projects I'm working on! ❤️\u003c/sub\u003e\n\n\u003c/p\u003e\n\n## ⭐️ Features\n- **📊 Size conscious** Be aware of how your changes impact file size\n- **💅 Pretty formatting** View color-coded assets ordered by size via `npx distsize`\n- **⚙️ Configurable** Save distsize data where you like and set custom thresholds\n\n\n## 🚀 Install\n```sh\nnpm i -D webpack-distsize\n```\n\n\n## 👩‍🏫 Easy setup\n\nAdd to your Webpack config:\n```js\n// 1. Import plugin\nconst Distsize = require('webpack-distsize');\n\nmodule.exports = {\n\t...,\n\n\tplugins: [\n\t\t// 2. Add to plugins array\n\t\tnew Distsize()\n\t]\n};\n```\n\nRun your Webpack build and track the produced `.distsize.json` file via version control.\n\n### Distsize viewing\n\nThe plugin installs the `distsize` binary to view the outputted distsize JSON file. IT defaults to reading `.distsize.json` in the current directory, but pass in a path to read from a custom path.\n\n```sh\nnpx distsize\n```\n\n\n## 🎛 Options \nConfigure Distisze by passing in an options object:\n```js\nnew Distsize({\n\t// Options\n})\n```\n\n- `log` `\u003cBoolean\u003e` (default `true`)  - Whether to log the distsize to stdout\n\n- `filepath` `\u003cString\u003e` (default `.distsize.json`) - Output location for distsize JSON data\n\n- `indent` `\u003cNumber|String\u003e`  (default `2`) - Indentation for distsize JSON data\n\n- `filter` `\u003cFunction(assetName)|RegExp|String\u003e` (`null`)  - Filter to include assets by name\n  ```js\n  // Example filter that ignores hidden files and source-maps\n  filter: (asset) =\u003e !asset.startsWith('.') \u0026\u0026 !asset.endsWith('.map')\n  ```\n\n- `thresholds` `\u003cArray\u003e` - Color coding to use for size thresholds\n\n  ```json5\n  [\n    { threshold: 100000, color: 'red' },\n    { threshold: 50000, color: 'orange' },\n    { threshold: 10000, color: 'yellow' },\n    { threshold: 5000, color: 'dodgerblue' },\n    { threshold: 0, color: 'lime' },\n  ]\n  ```\n\n  \n## 💁‍♀️ FAQ\n- **Can it track and display asset growth?**\n\n  Depends on your Webpack configuration. If your assets are emitted under the same name, then yes.\n\n  But if it usses [`[hash]`, `[contenthash]`, `[chunkhash]`](https://webpack.js.org/configuration/output/#template-strings), then it's not possible to _accurately_ draw a comparison across builds.\n\n- **Can it track size impact from dependency changes?**\n\n  If a dependency change impacts distribution size, it will be reflected by this plugin, but it will not contain any details that hint at which dependency grew in size. I recommend doing upgrades in isolation so it's easily identifiable. \n\n  Distsize focuses specifically on distribution size and making it digestible because that alone can be overwhelming—a large codebase can produce hundreds of assets.\n\n  If you want something similar for dependencies, I recommend using [webpack-dependency-size](https://github.com/privatenumber/webpack-dependency-size).\n\n\n## 👨‍👩‍👧 Related\n- [webpack-dependency-size](https://github.com/privatenumber/webpack-dependency-size) - Analyze dependency assets bundled into your Webpack build\n\n- [webpack-analyze-duplication-plugin](https://github.com/privatenumber/webpack-analyze-duplication-plugin) - Detect duplicated modules in your Webpack build\n\n## 💼 License\n\nMIT\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprivatenumber%2Fwebpack-distsize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprivatenumber%2Fwebpack-distsize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprivatenumber%2Fwebpack-distsize/lists"}