performance-budget

A task to produce a json output of the client side assets (file size) used on your website.

The task will create an object based on the file extension.

All images types will be grouped under the key "image"
All font types will be grouped under the key "fonts"
Maps and ico files will be ignored

SVG's are determined based on the "font-face" attribute being present. If not present it will be grouped under the images key.

Usage

install dependencies

npm install performance-budget

Basic setup using (gulp)

var performanceBudget = require('performance-budget');
 
gulp.task('default', function(){
    return gulp.src('your-files/**/*')
    .pipe(performanceBudget())
    .pipe(gulp.dest('dest'));
});

The dest is just a placeholder and has no influence on where your output is saved, the location can be defined in the options which is described below. If this is not defined the default location for your JSON file will be at the root of the current working directory.

Specific location (using gulp)

var performanceBudget = require('performance-budget');
 
gulp.task('default', function(){
    return gulp.src('your-files/**/*')
    .pipe(performanceBudget({dest: 'pathToJson', budget: 3000}))
    .pipe(gulp.dest('dest'));
});

Options

For a different file location pass the location as a parameter into performanceBudget.

performanceBudget({dest: '/new-folder/performance-budget.json'})

To define a personal budget you can pass the max file size as a parameter into performanceBudget. The file size input has to be a number and in bytes. If no file size is passed through it will default to 60000 (60KB).

performanceBudget({budget: 100000})

Example of output

{
  "fileTypes": {
    "fonts": {
      "total": 241,
      "files": [
        {
          "file": "/performance-budget/_src/fonts/gt-pressura-mono-regular-webfont.svg",
          "size": 98
        },
        {
          "file": "/performance-budget/_src/fonts/gt-pressura-mono-regular-webfont.ttf",
          "size": 61
        },
        {
          "file": "/performance-budget/_src/fonts/gt-pressura-mono-regular-webfont.woff",
          "size": 30
        },
        {
          "file": "/performance-budget/_src/fonts/gt-pressura-mono-regular-webfont.woff2",
          "size": 23
        },
        {
          "file": "/performance-budget/_src/fonts/gt-pressura-regular-webfont.eot",
          "size": 29
        }
      ],
      "percentage": 6
    },
    "images": {
      "total": 2924,
      "files": [
        {
          "file": "/performance-budget/_src/images/cl-logo.svg",
          "size": 906
        },
        {
          "file": "/performance-budget/_src/images/images.jpg",
          "size": 12
        },
        {
          "file": "/performance-budget/_src/images/imgres-1.png",
          "size": 1002
        },
        {
          "file": "/performance-budget/_src/images/imgres.png",
          "size": 2
        },
        {
          "file": "/performance-budget/_src/totalFileSize/imgres-1.png",
          "size": 1002
        }
      ],
      "percentage": 79
    },
    "js": {
      "total": 414,
      "files": [
        {
          "file": "/performance-budget/_src/scripts/test.js",
          "size": 207
        },
        {
          "file": "/performance-budget/_src/totalFileSize/test.js",
          "size": 207
        }
      ],
      "percentage": 11
    },
    "css": {
      "total": 142,
      "files": [
        {
          "file": "/performance-budget/_src/styles/info.css",
          "size": 57
        },
        {
          "file": "/performance-budget/_src/styles/other.css",
          "size": 0
        },
        {
          "file": "/performance-budget/_src/styles/other2.css",
          "size": 0
        },
        {
          "file": "/performance-budget/_src/styles/test.css",
          "size": 28
        },
        {
          "file": "/performance-budget/_src/totalFileSize/info.css",
          "size": 57
        }
      ],
      "percentage": 4
    }
  },
  "budget": 3000,
  "totalSize": 3721,
  "remainingBudget": -721
}