Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to minify javascript file generated by liquid template generator

I'm trying to optimize the shopify website and GoogleSpeed Insights recommends me to minify css and js files.

The recommended files are all generated by liquid template generator, so I can't use the popular minify tools available.

If anyone have experience in this issue, please advise me.

Thank you.

like image 392
adeltahir Avatar asked Mar 17 '14 08:03

adeltahir


People also ask

How do you minify source code?

Go to minifycode.com and click the CSS minifier tab. Then paste the CSS code into the input box and click the Minify CSS button. After the new minified code is generated, copy the code. Then go back to the css file of your website and replace the code with the new minified version.

Should I minify JS files?

Despite being an excellent programming language, JavaScript impacts web pages by slowing them down. To regain space and improve your page load speed, you must minify the JavaScript code. The minified version of JavaScript code can reduce the file size by as much as 30–90%.


1 Answers

If you try to minify such file, you will see an error because of Liquid templating code. Here is a trick which can help you to minify JavaScript files containing Liquid templating code. But this involves little manual labor.

Replace all Liquid templating code with some random unique string. Remember all the replacements. You can use a file diff app to find the difference of a .js.liquid file and the generated .js file so that it will be easy to find where you need to replace. Now you can minify this modified file without any error using any JavaScript minification tool. After the minification is over, you can replace the random unique strings with their corresponding replacements.

I am optimizing a theme for a good PageSpeed Insights score. This trick helped me to minify, combine and compress many .js.liquid files.

like image 119
Debiprasad Avatar answered Oct 22 '22 15:10

Debiprasad