Tuesday, February 05, 2013

Nodejs and compression of HTML, JS, CSS

To decrease loading time for pages, it is always nice to minify your HTML, CSS and JS. Also to decrease number of requests we inject our minified CSS/JS directly on our pages (ofc we will do that unless our CSS/JS have small size), so minus 2 requests to all pages.

Now time to write couple lines of real code

1. UglifyJS - compress JS

var uglifyJS = require("uglify-js");

var result = uglifyJS.minify("filename.js");
console.log(result.code);

2. Sqwish - compress CSS

var sqwish = require('sqwish');
var filename=app.get('filename.css');
fs.readFile(filename, 'utf8', function(err, data) {
    if (err) throw err;
    var minifiedCss = sqwish.minify(data)
    console.log(minifiedCss);
})

3. HTMLMinifier - compress HTML

var htmlminifier = require('html-minifier');
var minifiedHTML = htmlminifier.minify(data, {
 removeComments: true,
 removeCommentsFromCDATA: true,
 collapseWhitespace: true,
 collapseBooleanAttributes: true,
 removeAttributeQuotes: true,
 removeEmptyAttributes: true
});
So at the result we decreased size of our pages a lot and also decreased number of requests which is also nice, we all love "fast pages".

No comments :