Merge/Combine/Minify multiple Javascripts into one file so speed up page

Shopify Partner
17 0 2

Hey

I'm looking for a nice solution how to combine (and maybe even minify) multiple javascript files into one. Reason behind this is to speed up page loading time and minimize number of external files (google page check advices me to optimize there).

My first idea was to create a 'script.js.liquid' within 'assets/' and include all other js from the 'snippet/' folder. Unfortunately liquid returns a error saying 'Include commands are not allowed for asset files'. Bummer. any other idea?

Cheers Tobi

Cheers Tobi - Playmakers Football - http://www.playmakers-football.de
0 Likes
Shopify Partner
17 0 2

OK, I found a  not-so-nice workarround:

1. Move any scripts to `snippets`, postfix with `.liquid` 

2. Create a special page template. e.g. `page.scripts.js` and add your scripts:

{% layout none %}

{% include 'modernizr.min.js' %}

{% include 'script-handlebars.min.js' %}

...

3. Go to admin area, add a new page, select the special template, set handle to `scripts`

4. now you can load all script at once with {{ '/pages/scripts' | script_tag }}

5. Unfortunately the content type is wrongly set, to work around this, add a copy of this page to `assets`: `wget http://www.yourshop.com/pages/scripts -O assets/scripts.js

BAAM!

 

Cheers Tobi - Playmakers Football - http://www.playmakers-football.de
0 Likes
Highlighted
Tourist
15 0 1

Hey, I notice this is a pretty old thread. Anyone know if this still works?

0 Likes