Handlebars minify HTML

Question

In a Node.js Express application is there a way of minifying all Handlebars templates before they are sent to the renderer?

I considered creating an Express middleware that does the minification on the HTML response body - but I soon realised that this is highly ineffective since the minification would occur on every HTTP request.

There has to be a way of minifying .hbs templates and cache them server side?

Answer 1

You can minify on the fly but for performance reasons I would recommend you to minify the file with an external minifier beforehand and therefore you just do it once. Otherwise you have to minify the html every time the file is called upon.

Therefore, another solution is to use html-minifier from the command line, with the option

--ignore-custom-fragments "/{{[{]?(.*?)[}]?}}/"

This regex will ignore everything between {{ and }} and HTML-minify the rest.

Answer 2

Only add the next flag "--continue-on-parse-error", the following command worked for me:

html-minifier --input-dir [SOURCE_DIR] --output-dir [TARGET_DIR] --file-ext hbs --collapse-whitespace --continue-on-parse-error --remove-comments --minify-css true --minify-js true