gatsby-plugin-perf-budgets

0.0.18 • Public • 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.

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

Package Sidebar

Install

npm i gatsby-plugin-perf-budgets

Weekly Downloads

7,495

Version

0.0.18

License

MIT

Unpacked Size

789 kB

Total Files

41

Last publish

Collaborators

  • calcsam
  • pieh
  • benrobertson