{"id":13559114,"url":"https://github.com/robertknight/webpack-bundle-size-analyzer","last_synced_at":"2025-05-14T12:06:34.305Z","repository":{"id":29946401,"uuid":"33492893","full_name":"robertknight/webpack-bundle-size-analyzer","owner":"robertknight","description":"A tool for finding out what contributes to the size of Webpack bundles","archived":false,"fork":false,"pushed_at":"2023-03-02T13:02:12.000Z","size":1328,"stargazers_count":1394,"open_issues_count":22,"forks_count":45,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-05-10T20:01:34.032Z","etag":null,"topics":["file-size","webpack"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/robertknight.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}},"created_at":"2015-04-06T16:44:48.000Z","updated_at":"2025-04-11T13:17:50.000Z","dependencies_parsed_at":"2023-01-14T15:58:43.731Z","dependency_job_id":"defc4654-2050-47e0-8b6e-91e87d4db8c4","html_url":"https://github.com/robertknight/webpack-bundle-size-analyzer","commit_stats":{"total_commits":93,"total_committers":16,"mean_commits":5.8125,"dds":0.4516129032258065,"last_synced_commit":"ba1008239c7b4593cca7db5c4b4dd39ce4c277c5"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertknight%2Fwebpack-bundle-size-analyzer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertknight%2Fwebpack-bundle-size-analyzer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertknight%2Fwebpack-bundle-size-analyzer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertknight%2Fwebpack-bundle-size-analyzer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robertknight","download_url":"https://codeload.github.com/robertknight/webpack-bundle-size-analyzer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253598904,"owners_count":21934056,"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":["file-size","webpack"],"created_at":"2024-08-01T12:05:21.316Z","updated_at":"2025-05-14T12:06:34.278Z","avatar_url":"https://github.com/robertknight.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","webpack","Tools to analyze bundle size"],"sub_categories":["Webpack"],"readme":"Webpack Bundle Size Analyzer\n============================\n\n[![Build Status](https://travis-ci.org/robertknight/webpack-bundle-size-analyzer.svg?branch=master)](https://travis-ci.org/robertknight/webpack-bundle-size-analyzer)\n\nA small utility to help you find out what is contributing\nto the size of your [Webpack](http://webpack.github.io/) bundles.\n\nWebpack has a JSON output mode which produces detailed machine-readable\ninformation about everything that has been included in a generated bundle.\n\nThis output is produced by running `webpack --json`. This tool analyzes\nthe resulting JSON output and displays a tree of packages that were included\nin the bundle, ordered by the size of all the used modules.\n\nFor further reading on reducing the size of Webpack bundles,\nsee their [optimization guide](http://webpack.github.io/docs/optimization.html)\n\n## Usage\n\nThere are 2 ways to use this tool:\n\n1. As a command line application\n2. As a webpack plugin\n\n### CLI Usage\n\nAssuming you have the webpack CLI command [installed locally in your project](https://webpack.js.org/guides/installation#local-installation):\n\n```sh\nnpm install -g webpack-bundle-size-analyzer\nnode_modules/.bin/webpack --json | webpack-bundle-size-analyzer\n```\n\nIf you have webpack [installed globally](https://webpack.js.org/guides/installation#global-installation)\nthen the first part of this command will be just `webpack --json` instead.\n\nWhen run on [react-testing](https://github.com/robertknight/react-testing) for example,\nit produces this output, where `\u003cself\u003e` refers to the size of the bundle's own code.\n\n````\nreact: 641.95 kB (55.3%)\n  \u003cself\u003e: 641.95 kB (100%)\nchai: 125.8 kB (10.8%)\n  deep-eql: 7.51 kB (5.97%)\n    type-detect: 2.72 kB (36.2%)\n      \u003cself\u003e: 2.72 kB (100%)\n    \u003cself\u003e: 4.79 kB (63.8%)\n  assertion-error: 2.29 kB (1.82%)\n    \u003cself\u003e: 2.29 kB (100%)\n  \u003cself\u003e: 116 kB (92.2%)\nflummox: 73.46 kB (6.33%)\n  flux: 9.01 kB (12.3%)\n    \u003cself\u003e: 9.01 kB (100%)\n  eventemitter3: 5.94 kB (8.08%)\n    \u003cself\u003e: 5.94 kB (100%)\n  uniqueid: 947 B (1.26%)\n    \u003cself\u003e: 947 B (100%)\n  object-assign: 484 B (0.643%)\n    \u003cself\u003e: 484 B (100%)\n  \u003cself\u003e: 57.12 kB (77.8%)\nq: 58.84 kB (5.07%)\n  \u003cself\u003e: 58.84 kB (100%)\n...\n\u003cself\u003e: 195.57 kB (16.9%)\n````\n\n### Plugin Usage\n\n#### Description\nWhen using the plugin version of this library, a file will be written to a\nlocation of your choice (when you run your webpack build).  The file contents\nwill be a list of the packages in your bundle (sorted in descending order).\nEach line will contain the name of a package, along with it's file size, and the\npercentage of space it takes up in your bundle.\n\n#### Plugin Installation\nInstall this library as a development dependency to your webpack project:\n```sh\nnpm install --save-dev webpack-bundle-size-analyzer\n```\n\nImport your plugin at the top of your `webpack.config.js` file:\n\nOld School:\n```js\nvar WebpackBundleSizeAnalyzerPlugin = require('webpack-bundle-size-analyzer').WebpackBundleSizeAnalyzerPlugin;\n```\n\nNew School:\n```js\nimport { WebpackBundleSizeAnalyzerPlugin } from 'webpack-bundle-size-analyzer';\n```\n\nNow in your webpack's plugin section, start using this plugin:\n\n```js\n{\n  {...topOfConfig}\n  plugins: [\n    new WebpackBundleSizeAnalyzerPlugin('./reports/plain-report.txt')\n  ]\n  {...bottomOfConfig}\n}\n```\n\n#### Example Plugin Output\n\nUsing the above plugin configuration, the following file will be written:\n\n`\u003cwebpack-output-path\u003e/reports/plain-report.txt`:\n```text\nmarked: 27.53 KB (14.9%)\nlru-cache: 6.29 KB (3.40%)\nstyle-loader: 717 B (0.379%)\n\u003cself\u003e: 150.33 KB (81.3%)\n```\n\n\n### Important Note About Minified Code\n\nIf you minify/compress your code using the [approach recommended in the Webpack documentation](http://webpack.github.io/docs/optimization.html), which is to use the UglifyJS plugin, be aware that this tool will report the sizes of modules _before_ they are minified. This is because the statistics generated by `webpack --json` do not take account of plugins that operate on the bundle as a whole.\n\nKnowing the sizes of dependencies before they are minified can still be useful to get an idea of how much different dependencies are responsible for size of your minified bundle, but be aware that it can be misleading. This is because some libraries compress better than others.\n\nIf instead you minify modules in your bundle individually using a loader (eg. [the UglifyJS loader](https://www.npmjs.com/package/uglify-loader)), the stats output by `webpack --json` _will_ show minified sizes. If you want to get a better idea of the sizes of different dependencies after they are minified, you can temporarily remove the UglifyJS plugin and replace it with [the UglifyJS loader](https://www.npmjs.com/package/uglify-loader) instead before running `webpack --json | webpack-bundle-size-analyzer`.\n\nThe reason that using a plugin, rather than a loader, is the recommended approach in Webpack is that compression is better if applied to the whole bundle rather than to individual source files one at a time.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobertknight%2Fwebpack-bundle-size-analyzer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobertknight%2Fwebpack-bundle-size-analyzer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobertknight%2Fwebpack-bundle-size-analyzer/lists"}