https://github.com/moduscreateorg/webpack-gimbal-plugin

Webpack plugin that utilizes Gimbal to maintain performance budgets
https://github.com/moduscreateorg/webpack-gimbal-plugin

Last synced: about 2 months ago
JSON representation

Webpack plugin that utilizes Gimbal to maintain performance budgets

• Host: GitHub
• URL: https://github.com/moduscreateorg/webpack-gimbal-plugin
• Owner: ModusCreateOrg
• License: mit
• Created: 2019-05-10T12:55:20.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-07-11T23:44:32.000Z (over 2 years ago)
• Last Synced: 2024-04-28T06:53:53.423Z (over 1 year ago)
• Language: JavaScript
• Size: 308 KB
• Stars: 0
• Watchers: 3
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

[![MIT Licensed](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](./LICENSE)

[![Powered by Modus_Create](https://img.shields.io/badge/powered_by-Modus_Create-blue.svg?longCache=true&style=flat&logo=data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIwIDMwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNOTguODI0IDE0OS40OThjMCAxMi41Ny0yLjM1NiAyNC41ODItNi42MzcgMzUuNjM3LTQ5LjEtMjQuODEtODIuNzc1LTc1LjY5Mi04Mi43NzUtMTM0LjQ2IDAtMTcuNzgyIDMuMDkxLTM0LjgzOCA4Ljc0OS01MC42NzVhMTQ5LjUzNSAxNDkuNTM1IDAgMCAxIDQxLjEyNCAxMS4wNDYgMTA3Ljg3NyAxMDcuODc3IDAgMCAwLTcuNTIgMzkuNjI4YzAgMzYuODQyIDE4LjQyMyA2OS4zNiA0Ni41NDQgODguOTAzLjMyNiAzLjI2NS41MTUgNi41Ny41MTUgOS45MjF6TTY3LjgyIDE1LjAxOGM0OS4xIDI0LjgxMSA4Mi43NjggNzUuNzExIDgyLjc2OCAxMzQuNDggMCA4My4xNjgtNjcuNDIgMTUwLjU4OC0xNTAuNTg4IDE1MC41ODh2LTQyLjM1M2M1OS43NzggMCAxMDguMjM1LTQ4LjQ1OSAxMDguMjM1LTEwOC4yMzUgMC0zNi44NS0xOC40My02OS4zOC00Ni41NjItODguOTI3YTk5Ljk0OSA5OS45NDkgMCAwIDEtLjQ5Ny05Ljg5NyA5OC41MTIgOTguNTEyIDAgMCAxIDYuNjQ0LTM1LjY1NnptMTU1LjI5MiAxODIuNzE4YzE3LjczNyAzNS41NTggNTQuNDUgNTkuOTk3IDk2Ljg4OCA1OS45OTd2NDIuMzUzYy02MS45NTUgMC0xMTUuMTYyLTM3LjQyLTEzOC4yOC05MC44ODZhMTU4LjgxMSAxNTguODExIDAgMCAwIDQxLjM5Mi0xMS40NjR6bS0xMC4yNi02My41ODlhOTguMjMyIDk4LjIzMiAwIDAgMS00My40MjggMTQuODg5QzE2OS42NTQgNzIuMjI0IDIyNy4zOSA4Ljk1IDMwMS44NDUuMDAzYzQuNzAxIDEzLjE1MiA3LjU5MyAyNy4xNiA4LjQ1IDQxLjcxNC01MC4xMzMgNC40Ni05MC40MzMgNDMuMDgtOTcuNDQzIDkyLjQzem01NC4yNzgtNjguMTA1YzEyLjc5NC04LjEyNyAyNy41NjctMTMuNDA3IDQzLjQ1Mi0xNC45MTEtLjI0NyA4Mi45NTctNjcuNTY3IDE1MC4xMzItMTUwLjU4MiAxNTAuMTMyLTIuODQ2IDAtNS42NzMtLjA4OC04LjQ4LS4yNDNhMTU5LjM3OCAxNTkuMzc4IDAgMCAwIDguMTk4LTQyLjExOGMuMDk0IDAgLjE4Ny4wMDguMjgyLjAwOCA1NC41NTcgMCA5OS42NjUtNDAuMzczIDEwNy4xMy05Mi44Njh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+)](https://moduscreate.com)

# Webpack Gimbal Plugin

[Gimbal](https://github.com/ModusCreateOrg/gimbal) integration for Webpack. Uses the same [configuration](https://github.com/ModusCreateOrg/gimbal/#configuration) as Gimbal to simplify performance budgeting in production builds.

## Getting Started

You can install Gimbal globally using `npm` or `yarn`:

```sh

# with npm

npm install webpack-gimbal-plugin

# or with yarn

yarn add webpack-gimbal-plugin

```

Add it to your Webpack configuration as you would with any other plugin:

```js

var GimbalPlugin = require('webpack-gimbal-plugin');

{

  plugins: [new GimbalPlugin()];

}

```

## Configuration

Gimbal emits a warning or an error to a webpack compilation. It defaults to a warning for each failed audit. You can change that to an error by setting `bail: true` in GimbalPlugin configuration.

```js

{

  plugins: [

    // Emit errors for failed audits

    new GimbalPlugin({ bail: true }),

  ];

}

```

Note: webpack config also uses `bail` configuration to break execution on errors. GimbalPlugin uses the same verbiage, but it will not bubble up to Webpack's config. It's entirely isolated to this usecase.

### Gimbal Configuration Example

You can use [Gimbal configuration](https://github.com/ModusCreateOrg/gimbal/#configuration) in `.gimbalrc.yml` like the following:

```yaml

configs:

  heap-snapshot:

    threshold:

      Documents: 5

      Frames: 2

      JSHeapTotalSize: 23356000

      JSHeapUsedSize: 15068000

      Nodes: 800

      RecalcStyleCount: 9

  lighthouse:

    threshold:

      accessibility: 93

      'best-practices': 90

      performance: 50

      pwa: 75

      seo: 100

  size:

    - path: ./build/precache-*.js

      maxSize: 500 B

    - path: ./build/static/js/*.chunk.js

      maxSize: 1 MB

    - path: ./build/static/js/runtime*.js

      maxSize: 10 KB

    - path: ./build/

      maxSize: 18 MB

```

## Questions and Support

If you have a problem running Gimbal, [please submit an issue](./issues). The more information you give us the faster we can get back with a good answer.

## Modus Create

[Modus Create](https://moduscreate.com) is a digital product consultancy. We use a distributed team of the best talent in the world to offer a full suite of digital product design-build services; ranging from consumer facing apps, to digital migration, to agile development training, and business transformation.

[![Modus Create](https://res.cloudinary.com/modus-labs/image/upload/h_80/v1533109874/modus/logo-long-black.png)](https://moduscreate.com)

This project is part of [Modus Labs](https://labs.moduscreate.com).

[![Modus Labs](https://res.cloudinary.com/modus-labs/image/upload/h_80/v1531492623/labs/logo-black.png)](https://labs.moduscreate.com)

## Licensing

This project is [MIT licensed](./LICENSE).