performance-budget

    1.4.2 • Public • Published

    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
    }

    Keywords

    none

    Install

    npm i performance-budget

    DownloadsWeekly Downloads

    12

    Version

    1.4.2

    License

    ISC

    Last publish

    Collaborators

    • codecomputerlove