Strip HTML comments from Blaze templates in production

mraju · April 24, 2018, 4:46pm

I’m currently using Blaze templates, and have lots of HTML comments, often for commenting out parts of code that I need to stash.

I noticed that in production, these comments aren’t stripped. Not only does that increase the bundle size, but it leaks development info into the final public product.

Is there an easy way to minify Blaze templates when they’re compiled for production? At the very least stripping out HTML comments, but if it also strips unnecessary whitespaces / lines / etc. that would be great as well.

Or else, if this isn’t an automatic part of the meteor build chain, is there a tool out there that I can use to pre-process my Blaze templates before building the final production bundle?

illustreets · April 25, 2018, 5:38pm

Simply use a Blaze comment block to wrap the html one:

{{!--
<!--
Html content here
-->
--}}

Or just use only the Blaze comments markup.

quape · April 24, 2020, 11:13am

Hi there,
I want to come back to this topic, we really need to strip comments out of the production HTML. I tried to create a html-minifier but only .js and .css files are supported. Is there any other solution?

illustreets · April 24, 2020, 12:57pm

Not exactly the same, but replacing them with comment tags will ensure they are removed when compiled.

jkuester · April 26, 2020, 9:50am

@quape if you can’t use the Blaze comments (curly brackets) then what about a small isobuild compiler? Since striping comments won’t require an AST (afaik) you should be good using a simple regex.

Edit: I think the best would be to create a commit in the Blaze repo because this should be core functionality of Blaze

Edit edit: okay none of the build plugins (compiler, linter, minifier) will work with html and that’s a pity since there won’t be any way right now to “enhance” the toolchain with own transformations. We would have to implement this feature for Blaze.

Maybe someone of the core team can enlighten us, why it isobuild designed to prevent a second html compiler plugin?

quape · May 23, 2020, 9:57am

@jkuester Thanks for your help. Well I would also call it a security issue when normal HTML comments find their way in a production system. I would treat them like js comments and strip them before going productive. At least I should have a option for that or would be able to write my own minifier.

bharathkeshav12 · December 22, 2020, 6:05am

Blaze comments are valid only within the scope of the template <template name='dummy'> handlebar comments </template> What about the comments outside the scope of the template?

storyteller · December 23, 2020, 9:54am

I think for that you might want to look into babel plugins that would remove html comments in general during production build.

jirikrepl · June 8, 2023, 7:08am

I think it would be good if Blaze could remove HTML comments during compilation.
Maybe we would need to change how HTML comments are processed by spacebars-compiler here and on other places html-scanner.js

I am not sure, maybe Meteor uses Babel and Babel plugins after app.js and dynamic modules are created.
Then in app.js HTML comments have this Blaze form:
HTML.Raw('\n \x3c!-- my-comment --\x3e\n ')
I think the Babel plugin for comment removal will not work.

I found a workaround for myself. I am going to rewrite the HTML comments to Blaze comments.

Having HTML comment outside element will not be added to prod. code
Having blaze comment inside element will not be added to prod. code.

So you can use comments like this:

<!-- dev comment 1 -->
<template name="my-template">
  {{! dev comment 2}}
  <h1>My template</h1>
<template>

In my IDE (IntelliJ Idea) I found a setting where I can change the syntax of comments.
Now comments created with keyboard shortcut will produce blaze comments (handlebars syntax)
https://youtrack.jetbrains.com/issue/WEB-19142