What you need
A stylesheet or script you want to shrink, and a way to test the page afterwards.
Example
The tools above run real engines. Here is the output they produce for a tiny stylesheet and script.
CSS before (127 characters) and after (67):
/* header */
.card {
margin: 0px 0px 10px 0px;
color: #ffffff;
background-color: #FF0000;
}
.card {
padding: 0.50em;
}
.card{margin:0 0 10px;color:#fff;background-color:red;padding:.5em}
JavaScript before (161 characters) and after (65):
// add two numbers
function addNumbers(firstNumber, secondNumber) {
const total = firstNumber + secondNumber;
return total;
}
console.log(addNumbers(2, 3));
function addNumbers(d,e){return d+e}console.log(addNumbers(2,3));
Common pitfalls
- Do not minify and then edit by hand; regenerate from source instead.
- Source maps map minified code back to the original in the browser debugger; generate them in a build tool for production work.
- Minifying already minified files gains almost nothing.
- Code that uses
eval,Function.prototype.nameor string property names can break under mangling.