Estimates the size of minified and gzipped JavaScript, CSS and HTML files. Check, how much space will a particular source take in the minified output.
Note: If you use Node.js 8 or 9, install a version 1.x. Versions 2.x require Node.js 10 or newer. (They need support for asynchronous generators.)
Make sure that you have Node.js >= 10 installed. Install the minified-size package globally:
$ npm install --global minified-size
Print the original, expected minified and gzipped sizes of a sample file:
$ minified-size lib/index.js
lib/index.js: 2.54 kB, 1.48 kB, 643 B
Running minified-size without any parameters will print usage instructions:
Usage: minified-size [options] <file>, ... | --
Options:
-V, --version output the version number
-l, --language [name] specifies the input language (default: "js")
-j, --json print results in the JSON format
-r, --raw-sizes print sizes in bytes as integers
-o, --no-original-size prevents printing the size of the original code
-m, --no-minified-size prevents printing the size of the minified code
-g, --no-gzipped-size prevents printing the size of the gzipped code
-h, --help output usage information
All three sizes are estimated by default. File paths may contain wildcards.
If "--" is entered instead of files, the standard input will be read.
Stylesheets are recognized by the extension ".css", or they can be forced
by the language "css" on the command line. Web pages are recognized by the
extension ".htm[l]", or they can be forced by the language "html".
If parsing of the input or its minification fails, a colourful error message with additional information will be printed instead of the computed sizes. For example, a typo "exort" instead of "export":
$ minified-size test/invalid.js
test/module.txt(1,7): unknown: Unexpected token, expected ";"
> 1 | exort default {
| ^
2 | "compressed": "
3 | "
4 | }` } ]
Make sure that you use Node.js >= 10. Install the minified-size package locally:
npm install --save minified-sizeGet the original, expected minified and gzipped sizes (in bytes) of a sample file:
const { getMinifiedSizes } = require('minified-size')
const results = await getMinifiedSizes({ files: [ 'lib/index.js' ] })
// [ { file: 'lib/index.js',
// originalSize: 2544,
// minifiedSize: 1482,
// gzippedSize: 643 } ]If you process a lot of files, you can use an asynchronous generator, which yields results one-by-one to get them earlier, instead of returning an array with all of them together:
const { generateMinifiedSizes } = require('minified-size')
const resultGenerator = generateMinifiedSizes({
files: [ 'public/**/*.(js|css|html)' ]
})
for (;;) {
const result = await resultGenerator.next()
if (result.done) {
break
}
const { error, file, originalSize, minifiedSize, gzippedSize } = result.value
if (error) {
console.info(`${file}: ${originalSize}, ${minifiedSize}, ${gzippedSize}`)
} else {
console.error(`${file}: ${error}`)
}
}language- a string specifying the input language ("js", "css" or "html")files- an array of strings with file paths to load and processstreams- an array of readable streams with source code to processsources- an array of strings with source code to processgzip- a boolean to disable estimating the gzipped output size, or an object with options for gzip.
If parsing of the input or its minification fails, the returned object will contain an error key instead of the computed sizes:
const minifiedSize = require('minified-size')
const files = [ 'test/invalid.js' ]
const results = await minifiedSize({ files })
// [ { file: 'test/invalid.js',
// error: {
// reason: 'unknown: Unexpected token, expected ";"',
// line: 1,
// column: 7,
// message: `test/module.txt(1,7): unknown: Unexpected token, expected ";"
//
// > 1 | exort default {
// | ^
// 2 | "compressed": "
// 3 | "
// 4 | }` } ]Let us say, that you minify scripts using UTF-8 literals a lot:
message = "䅬朤堾..."If you run such input through 'babel-minify`, for example, you may become a lot bigger output instead of a smaller one, because it escapes non-latin characters:
message="\u416C\u6724\u583E\u605B\u0825\u6120\u4C20..."Look for an option, that will make your minifier retain the Unicode literals unchanged, or converts all escaped Unicode code points to literals. You could also post-process the minified output yourself by the following method:
function replaceEscapedUnicodeCharacters (source) {
return source.replace(/\\u([\w]{4})/gi, (match, code) =>
String.fromCharCode(parseInt(code, 16)))
}The size computation done by minified-size uses the function above to ensure correct results until the issue babel-minify/619 is resolved.
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
- 2019-06-21 v2.0.0 Print results for each file early; do not wait, until all are processed
- 2019-06-21 v1.2.0 Support stylesheets (CSS) and web pages (HTML)
- 2019-06-20 v1.0.0 Support full Unicode and prints better error messages
- 2018-08-31 v0.2.2 Support Windows paths
- 2018-08-31 v0.2.0 Support source code read from standard input
- 2018-08-31 v0.1.0 Support wildcards in the input file paths
- 2018-08-31 v0.0.1 Initial release
Copyright (c) 2018-2019 Ferdinand Prantl
Licensed under the MIT license.