# gatsby-plugin-perf-budgets

> **gatsby-plugin-perf-budgets** is an *experimental* plugin to make browsing bundles on a page basis easier. It is used in conjunction with `gatsby-plugin-webpack-bundle-analyser-v2`.

Latest version **0.0.18** (published 2021-04-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-plugin-perf-budgets
pnpm add gatsby-plugin-perf-budgets
yarn add gatsby-plugin-perf-budgets
bun add gatsby-plugin-perf-budgets
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.18 |
| Published | 2021-04-29 |
| First published | 2020-03-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.14.4 |
| Dependencies | 14 |
| Unpacked size | 770.7 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | calcsam, pieh, benrobertson |
| Keywords | webpack, bundle, analyzer, modules, size, interactive, chart, treemap, zoomable, zoom |

## Links

- npm: https://www.npmjs.com/package/gatsby-plugin-perf-budgets
- npm.io page: https://npm.io/package/gatsby-plugin-perf-budgets

## Dependencies (14)

- [ws](https://npm.io/package/ws.md) ^6.0.0
- [bfj](https://npm.io/package/bfj.md) ^6.1.1
- [ejs](https://npm.io/package/ejs.md) ^2.6.1
- [acorn](https://npm.io/package/acorn.md) ^7.1.1
- [chalk](https://npm.io/package/chalk.md) ^2.4.1
- [buffer](https://npm.io/package/buffer.md) ^5.5.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1
- [opener](https://npm.io/package/opener.md) ^1.5.1
- [express](https://npm.io/package/express.md) ^4.16.3
- [filesize](https://npm.io/package/filesize.md) ^3.6.1
- [commander](https://npm.io/package/commander.md) ^2.18.0
- [gzip-size](https://npm.io/package/gzip-size.md) ^5.0.0
- [acorn-walk](https://npm.io/package/acorn-walk.md) ^7.1.1

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 0.0.18 (latest) — 2021-04-29
- 0.0.17 — 2020-09-02
- 0.0.16 — 2020-05-12
- 0.0.15 — 2020-05-11
- 0.0.14 — 2020-05-11
- 0.0.13 — 2020-03-22
- 0.0.12 — 2020-03-22
- 0.0.11 — 2020-03-22
- 0.0.10 — 2020-03-22
- 0.0.9 — 2020-03-22
- 0.0.8 — 2020-03-22
- 0.0.7 — 2020-03-22
- 0.0.6 — 2020-03-22
- 0.0.4 — 2020-03-22
- 0.0.3 — 2020-03-21
- … 2 more at https://npm.io/package/gatsby-plugin-perf-budgets/versions

## README

**gatsby-plugin-perf-budgets** is an *experimental* plugin to make browsing bundles on a page basis easier. It is used in conjunction with `gatsby-plugin-webpack-bundle-analyser-v2`. 

## Installation

```
npm i gatsby-plugin-webpack-bundle-analyser-v2 -D
npm i gatsby-plugin-perf-budgets -D
```

or

```
npm i gatsby-plugin-webpack-bundle-analyser-v2 -D
npm i gatsby-plugin-perf-budgets -D
```

## Usage

Include the plugin in your `gatsby-config.js` file :

```javascript:title=gatsby-config.js
// In your gatsby-config.js
plugins: [
    `gatsby-plugin-perf-budgets`,
    `gatsby-plugin-webpack-bundle-analyser-v2`
]
```

## Example

![gatsby-plugin-perf-budgets screenshot](./screenshot.jpg)

## Features

`gatsby-plugin-perf-budgets` generates a report, located at `/_report.html` from the site root, breaking down bundle size by route, break down global "app" bundle vs template-specific bundles, and separate out JavaScript versus data sizes.

* Sort by template, page size, or path
* Search/filter by path

When you click into a route you can see bundle sizes as generated by `gatsby-plugin-webpack-bundle-analyser-v2`. The Gatsby documentation has [an overview to understanding (and optimizing) the results](https://www.gatsbyjs.com/docs/how-to/performance/improving-site-performance/#step-1-profile-your-bundle).

## Contributing
Contributions are welcome!

### License
MIT

---
_Source: https://npm.io/package/gatsby-plugin-perf-budgets · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._