Compare the compressed and uncompressed sizes of a CSS file before and after processing.
npm install css-size> Compare the size of a CSS file after processing it to the original.
The functionality can be easily replaced by minifying the file and dividing
the minified file size by the unminified file size.
Results are shown for uncompressed as well as when compressed using gzip
and brotli. For most users, one of the compressed sizes will best
represent what will be served to a client in production. It also
provides a better comparison between the minified and the original CSS.
CSS is expected to processed by [postcss] plugins but can be used with
any processing code that returns a promise that resolves to an object
with a css property.
With npm do:
``
npm install css-size --save
`js
var postcss = require('postcss');
var autoprefixer = require('autoprefixer');
var nano = require('cssnano');
var css = 'h1 {\n color: black;\n}\n';
var nanoOpts = {};
var cssSize = require("css-size");
function process(css, options) {
return postcss([ autoprefixer, nano(options) ]).process(css);
}
cssSize(css, nanoOpts, process).then(function (results) {
console.log(results);
/*
{ uncompressed:
{ original: '23 B',
processed: '14 B',
difference: '9 B',
percent: '60.87%' },
gzip:
{ original: '43 B',
processed: '34 B',
difference: '9 B',
percent: '79.07%' },
brotli:
{ original: '27 B',
processed: '16 B',
difference: '11 B',
percent: '59.26%' } }
*/
});
cssSize.table(css, nanoOpts, process).then(function (table) {
console.log(table);
/*
┌────────────┬──────────────┬────────┬────────┐
│ │ Uncompressed │ Gzip │ Brotli │
├────────────┼──────────────┼────────┼────────┤
│ Original │ 23 B │ 43 B │ 27 B │
├────────────┼──────────────┼────────┼────────┤
│ Processed │ 14 B │ 34 B │ 16 B │
├────────────┼──────────────┼────────┼────────┤
│ Difference │ 9 B │ 9 B │ 11 B │
├────────────┼──────────────┼────────┼────────┤
│ Percent │ 60.87% │ 79.07% │ 59.26% │
└────────────┴──────────────┴────────┴────────┘
*/
});
cssSize.numeric(css, nanoOpts, process).then(function (results) {
console.log(results);
/*
{
uncompressed: {
original: 23,
processed: 14,
difference: 9,
percent: 0.6087
},
gzip: {
original: 43,
processed: 34,
difference: 9,
percent: 0.7907
},
brotli: {
original: 27,
processed: 16,
difference: 11,
percent: 0.5926
}
}
*/
});
`
Pass input of CSS to receive an object with information about theoptions
original & minified sizes (uncompressed, gzipped, and brotli'd), plus
difference and percentage results. The object is passedprocessor
through to the should you wish to compare sizes using
different options than the defaults.
Exactly like cssSize(...) except the results are returned as numberspercentage
instead of preformatted strings. In numeric mode, the value is a100%
fraction (rounded to 4 significant digits), instead of being scaled to .
Use the table method instead to receive the results as a formatted table.
#### input
Type: string, buffer
#### options
Type: object
#### processor
Type: function
The processor accepts as arguments the input and options and returns a
Promise that resolves to an object with a css property containing the
processed css output.
See the available options with:
`sh`
$ css-size --help
* [js-size]: Display the size of a JS file.
See CONTRIBUTORS.md.
MIT © Ben Briggs
[postcss]: https://github.com/postcss/postcssjs-size`]: https://github.com/lukekarrys/js-size
[