This hint checks whether JavaScript used by your web page is minified or not.
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.
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.
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
}]
},
...
}This package is installed automatically by webhint:
npm install hint --save-devTo 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.
Here are some useful topics if you are new to minification: