gatsby-plugin-perf-budgets
v0.0.18
Published
**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`.
Downloads
24,497
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 :
// In your gatsby-config.js
plugins: [
`gatsby-plugin-perf-budgets`,
`gatsby-plugin-webpack-bundle-analyser-v2`
]
Example
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.
Contributing
Contributions are welcome!
License
MIT