@hint/hint-minified-js

Minify JavaScript (minified-js)

This hint checks whether JavaScript used by your web page is minified or not.

Why is this important?

Minifying your JavaScript is a great way to improve your page load time. This includes removing unused variables and methods, renaming variables and methods to smaller names, removing code comments, etc. Minification should generate a smaller file, and thus less code to parse.

What does the hint check?

This hint generates an "Improvement Index" value for the script content and compares it against a derived threshold value to determine whether the content is minified or not.

Improvement index is generated by comparing the number of tokens (from the abstract syntax tree generated from the code) with the total content length of a file.

const tokenRatio = tokenLength / contentLength;
const improvementIndex = Math.round((1 - tokenRatio) * 100);

if (improvementIndex > threshold) {
    // Script might be unminified
}

By default, the hint uses 75 as the threshold value to compare against. If the calculated improvement index value is greater than the threshold, the script will be flagged as unminified.

The value 75 was derived after running tests on some of the most used libraries and a couple of custom JavaScript files. See the sample repo with the test files and results.

Can the hint be configured?

By default, the hint uses 75 as the threshold value. But you can override that with a custom value in your .hintrc config:

{
    "connector": {...},
    "formatters": [...],
    "parsers": ["javascript"],
    "hints": {
        "minified-js": ["error", {
            "threshold": 80
        }]
    },
    ...
}

How to use this hint?

This package is installed automatically by webhint:

npm install hint --save-dev

To use it, activate it via the .hintrc configuration file:

{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "minified-js": "error",
        ...
    },
    "parsers": ["javascript"],
    ...
}

Note: The recommended way of running webhint is as a devDependency of your project.

Further Reading

Here are some useful topics if you are new to minification:

• Minification
• Minify Resources (HTML, CSS, and JavaScript)