Monitor asset size over time
JavaScript HTML CSS
Latest commit a8f96ec Jun 19, 2017 @kaelig committed on GitHub Merge pull request #27 from kaelig/greenkeeper/webpack-3.0.0
Update webpack to the latest version 🚀

README.md

moniteur Build Status npm version Greenkeeper badge Standard Version

For people who care about keeping an eye on their CSS and JavaScript file sizes.

Deploy

Demo & Documentation


CLI

Moniteur is also available as a command line interface:

npm install -g moniteur

Usage:

Usage: moniteur [options] [command]


Commands:

  record   record a snapshot of all asset metrics
  serve    start the server to show metrics in the browser
  assets   display the list of assets loaded by moniteur
  help     display this helpful message

Options:

  -h, --help     output usage information
  -V, --version  output the version number

Configuration: edit the .moniteurrc.yml file in the current directory.

Database configuration

For now, two types of storage are supported: Redis and local filesystem.

A Redis URL can be passed through an environment variable, instead of having it stored in the configuration file:

DB__REDIS_URL=redis://rediscloud:XXXX@pub-redis-XXXX.us-east-X-X.X.ec2.garantiadata.com:13714

Run your application like this:

DB__REDIS_URL=redis://url moniteur [options]

Note that REDIS_URL and REDISCLOUD_URL are also valid environment variables.

Development

Clone the repository and run:

npm run dev

Asset monitor API

Record data

Takes a snapshot of asset metrics and stores them in the .moniteur/ directory.

moniteur record

HTTP API

View a JSON representation of all loaded assets

/assets.json

JSON data object for HighCharts (providing the asset name's hash)

Since forever: /metrics/stylesheets/adf6e9c154cb57a818f7fb407085bff6

Between two dates: /metrics/stylesheets/adf6e9c154cb57a818f7fb407085bff6/1015711104475..1415711104475

License

MIT

Acknowledgments

Merci to https://github.com/t32k/stylestats, which has been a great source of inspiration.

And thanks to @oncletom for helping building the early versions of moniteur.

Roadmap

  • Make moniteur a working node module
  • Run as some sort of daemon that monitors asset metrics every X seconds
  • Monitor JavaScript files
  • Unit / Integration tests
  • Option to filter graphs by time range (last 7 days, last 30 days, last year)
  • Slack Bot

Ideas

  • Providing a page's URL, scrape all assets out of it and analyse them
  • Parse all assets in a particular directory
  • Asset size budget limits
  • Email alert when budget is almost reached or exceeded
  • Weekly email recaps