How to do "html minify" in Phoenix?

Hi! I want to do “html minify” with html-pages-brunch.
But it did not work, How to write the config?
Is there other better methods?

1 Like

I’ve been doing with rcssmin for python: https://pypi.python.org/pypi/rcssmin

Is it suitable to use npm, yarn managers and tools like gulp for minification? Elixir itself can handle minification probably… Currently frontend libs are dependent in nodejs.
I’m interested in this thread too :slight_smile:

sorry, I’m talking for js,css. Just saw keyword HTML :sleepy:

I’m not sure if this is really possible. When you compile your Phoenix application, the templates actually get compiled into function calls. Meaning there is no actual HTML file that can be minified.

I haven’t looked into it, but you may be able to do it in a plug, but then you are minifying on every single request.

The best course of action would probably be to make a custom EEx.Engine and have that minify the content upon compilation.

Or a plug that adds a post handler to process and minify the body when the return type is html.

maybe this one: https://hex.pm/packages?_utf8=✓&search=minify&sort=recent_downloads

1 Like

I mentioned that in my response. But the downside to that is that you are now minifying on every request.

Or at least the ones that you put the plug on. :slight_smile:

Hmm, interesting, old but updateable…

1 Like

Do you see any issues? The module is very simple and works just fine.

I’m wondering if it’s actually “worth it” - I’ve tried it, and the server takes about 2ms longer to send the response now, but I don’t think that the page loads much faster (if faster at all).

Why would I add a minifier to the app in the first place when there istn’t an obvious advantage?

Adding a minifier is mostly to save on network bandwidth (I.E. costs) rather than for loading time.

1 Like

The html-pages-brunch plugin was originally created for the purpose of minifying AngularJS templates in a folder-by-feature structure. It was never meant to be used for server-side template compilation, but it is possible to do provided the compilation is done before server rendering. Follow these steps:

  1. Put your templates inside static folder into a separate subfolder, e.g. templates
  2. Add this folder to watched in brunch-config.js and point it to default phoenix template folder, e.g. paths: { watched: ["templates"], public: "../lib/yourproject_web/" }
  3. Tune the plugin to compile elixir templates
    plugins: {htmlPages: { pattern: /\.html.eex$/, destination: function(path) { return path.replace(/^app[\/\\](.*)\.html.eex$/, "$1.html.eex"); } }}

Should work without any performance penalties but will break pipelining for other static assets.

1 Like

On second thought, html-pages-brunch serves no real purpose in the context of Phoenix unless building a SPA with html templates of AngularJS variety. The plugin reloads your views on html save, which does not come out of the box with Brunch, so its a great convenience for dev env, but Phoenix already does that for your views anyway. The only time your actually want to do html minification is for prod releases, which can be handled by html-minifier from the command line during your build/deploy cycle. So it can look like this:

  1. npm install html-minifier -g
  2. define a make task minify-templates: html-minifier --input-dir ./lib --output-dir ./lib --file-ext eex --collapse-whitespace --remove-comments --remove-script-type-attributes --remove-tag-whitespace --use-short-doctype --minify-css true --minify-js true
  3. run this task before build/deploy
  4. at the end of your run, undo changes made to your templates git checkout .

Server side minification complete.

2 Likes

Recently have updated minify_response to latest Floki and Plug API

Available in Hex as plug_minify_html

1 Like

Out of interest, what is the minimal size of returned HTML where such optimisation starts to make sense?

I would say the minimal size is 1.5 kilobytes (MTU)