{"id":15651576,"url":"https://github.com/drwpow/vite-plugin-bundlesize","last_synced_at":"2025-09-24T23:31:23.202Z","repository":{"id":65135608,"uuid":"582819695","full_name":"drwpow/vite-plugin-bundlesize","owner":"drwpow","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-17T14:59:37.000Z","size":202,"stargazers_count":35,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-08T15:17:27.905Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/drwpow.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-28T00:36:06.000Z","updated_at":"2025-01-03T01:54:27.000Z","dependencies_parsed_at":"2024-03-06T04:27:13.166Z","dependency_job_id":"35d07fb9-c059-4d4d-8e8c-9a7724c5f71c","html_url":"https://github.com/drwpow/vite-plugin-bundlesize","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drwpow%2Fvite-plugin-bundlesize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drwpow%2Fvite-plugin-bundlesize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drwpow%2Fvite-plugin-bundlesize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drwpow%2Fvite-plugin-bundlesize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drwpow","download_url":"https://codeload.github.com/drwpow/vite-plugin-bundlesize/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234138611,"owners_count":18785443,"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":[],"created_at":"2024-10-03T12:39:10.702Z","updated_at":"2025-09-24T23:31:23.190Z","avatar_url":"https://github.com/drwpow.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⚡ vite-plugin-bundlesize\n\nVite plugin for inspecting bundlesizes and enforcing limits on the amount of JS shipped to the client. Works with Vite, Astro, SvelteKit, and any other Vite-based build tool.\n\nInspired by [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) and [Bundlephobia](https://bundlephobia.com/).\n\n![screenshot](./docs/images/vite-plugin-bundlesize.png)\n\n## Setup\n\n### Requirements\n\n- Vite \u003e= 6.0\n\n### Installing\n\nInstall from npm:\n\n```\nnpm install --dev vite-plugin-bundlesize\n```\n\n### Config\n\nAnd add to your [Vite config plugins](https://vitejs.dev/config/shared-options.html#plugins). Also be sure to enable [sourcemaps](https://vitejs.dev/config/build-options.html#build-sourcemap) as this is needed to calculate the sizes more accurately (setting it to `hidden` is recommended):\n\n```diff\n  import { defineConfig } from \"vite\";\n+ import bundlesize from \"vite-plugin-bundlesize\";\n\n  export default defineConfig({\n    plugins: [\n+     bundlesize(),\n    ],\n+   build: {\n+     sourcemap: \"hidden\",\n+   },\n  });\n```\n\nNow whenever you run `npx vite build`, a `bundlemeta.json` file will be created. It’s recommended to add this to `.gitignore` as most people don’t need to track this. This is created only so you can inspect your bundle without having to do a fresh build each time.\n\n### Visualizing your bundle\n\nMake sure you’ve built your project first (`vite build`). Then, inspect your bundle composition by running the following command from the project root:\n\n```\nnpx bundlesize\n```\n\nThis will reuse the existing data saved to `bundlemeta.json` from the last build. If your code has changed at all, you’ll need to rerun `vite build` to regenerate that.\n\n### Enforcing size limits\n\nAdd a `limits` option to enforce limits on chunks:\n\n```diff\n  import { defineConfig } from \"vite\";\n  import bundlesize from \"vite-plugin-bundlesize\";\n\n  export default defineConfig({\n    plugins: [\n-     bundlesize(),\n+     bundlesize({\n+       limits: [\n+         { name: \"assets/index-*.js\", limit: \"100 kB\", mode: \"uncompressed\" },\n+         { name: \"**/*\",              limit: \"150 kB\", mode: \"uncompressed\" },\n+       ],\n+     }),\n    ],\n  });\n```\n\n`limits` is an array of the following;\n\n| Name    |                 Type                  |     Default      | Description                                                                                                                                                   |\n| :------ | :-----------------------------------: | :--------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `name`  |               `string`                |                  | A glob matched by [picomatch](https://github.com/micromatch/picomatch).                                                                                       |\n| `limit` |               `string`                |    `\"150 kB\"`    | Any human-readable size. We recommend `150 kB` which is the default, but you may raise or lower that number as needed.                                        |\n| `mode`  | `\"gzip\" \\| \"brotli\" \\|\"uncompressed\"` | `\"uncompressed\"` | Whether or not to take compression into account for size limits. _Note: this plugin will NOT compress anything for you! This is only for reporting purposes._ |\n\nThe order of the array matters. Only the first `name` a file matches with will apply, so order your matches from more-specific to less-specific.\n\n\u003e [!NOTE]\n\u003e\n\u003e Note on `gzip` and `brotli` compression: the stats that show how each chunk breaks down into what modules\n\u003e only rely on `\"uncompressed\"` sizes for %s. `gzip` and `brotli` rely on repetition, therefore each module\n\u003e does not contribute to the compressed size in 1:1 proportion with its unpacked size.\n\n#### Ignoring chunks\n\nTo ignore a chunk, set `limit: Infinity`:\n\n```diff\n  import { defineConfig } from \"vite\";\n  import bundlesize from \"vite-plugin-bundlesize\";\n\n  export default defineConfig({\n    plugins: [\n      bundlesize({\n        limits: [\n          { name: \"assets/index-*.js\",   limit: \"100 kB\" },\n+         { name: \"assets/ignored-*.js\", limit: Infinity },\n          { name: \"**/*\",                limit: \"150 kB\" },\n        ],\n      }),\n```\n\nWhile it's possible to increase the limit globally with `{ name: \"**/*\", limit: Infinity }`. It is not recommended and you should prefer being explicit as to which files you are excluding.\n\n#### Exiting build\n\nBy default, this plugin will **cause `vite build` to error and exit** when a chunk exceeds a certain limit (as opposed to [build.chunkSizeWarningLimit](https://vitejs.dev/config/build-options.html#build-chunksizewarninglimit) which will only warn). In order to allow every build to pass and only show warnings, add `allowFail: true`:\n\n```diff\n  import { defineConfig } from \"vite\";\n  import bundlesize from \"vite-plugin-bundlesize\";\n\n  export default defineConfig({\n    plugins: [\n      bundlesize({\n+       allowFail: true,\n      }),\n    ],\n  });\n```\n\nIf `allowFail: true` is set, you’ll have to run `npx bundlesize` after every build to throw an error (including in CI).\n\n## All options\n\n| Name             |         Type         |       Default       | Description                                                                                                                         |\n| :--------------- | :------------------: | :-----------------: | :---------------------------------------------------------------------------------------------------------------------------------- |\n| `outputFile`     |       `string`       | `\"bundlemeta.json\"` | Change the location/name of `bundlemeta.json`                                                                                       |\n| `limits`         |      `Limit[]`       |                     | See [enforcing size limits](#enforcing-size-limits)                                                                                 |\n| `allowFail`      |      `boolean`       |        false        | Allow `vite build` to succeed even if limits are exceeded ([docs](#exiting-build))                                                  |\n| `stats`          | `\"summary\" \\| \"all\"` |     `\"summary\"`     | Show a **summary** of failed chunks, or view **all** stats.                                                                         |\n| `entryPointOnly` |      `boolean`       |        false        | When true, the tool will only check entry points and not all chunks. This is useful if you're only focused on render blocking code. |\n\n## Troubleshooting\n\n### Error `[ERR_REQUIRE_ESM]`\n\nIf you get the following error add `\"type\": \"module\"` to your top-level `package.json` ([docs](https://nodejs.org/api/packages.html#type)). For most users using Vite this won’t have any impact (and is recommended to do anyway).\n\n```\nError [ERR_REQUIRE_ESM]: require() of ES Module /…/vite-plugin-bundlesize/dist/plugin/index.js from /…/vite-plugin-bundlesize/example/vite-react/vite.config.ts not supported.\nInstead change the require of index.js in /…/vite-plugin-bundlesize/example/vite-react/vite.config.ts to a dynamic import() which is available in all CommonJS modules.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrwpow%2Fvite-plugin-bundlesize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrwpow%2Fvite-plugin-bundlesize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrwpow%2Fvite-plugin-bundlesize/lists"}