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.
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
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`
]
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.
Contributions are welcome!
MIT