gpp
gatsby-plugin-perf-budgets
npm i gatsby-plugin-perf-budgets
gpp

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`.

by pieh

0.0.18 (see all)License:MITTypeScript:Not FoundCategories:Gatsby Bundle Analysis
npm i gatsby-plugin-perf-budgets
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

gatsby-plugin-perf-budgets screenshot

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