Shopify offers Javascript minification?

[tim]

Hi, has been looking at the Brooklyn theme demo shop and noticed that it loads theme javascript using this URL:

https://cdn.shopify.com/s/files/1/0260/0583/1702/t/3/assets/theme.js?enable_js_minification=1&v=1793... 

and it is minified, while 

https://cdn.shopify.com/s/files/1/0260/0583/1702/t/3/assets/theme.js?v=1793745868414032183 

is not (as before).

Was it mentioned in any documents? Obviously, works for JS files in my test shop...

(Note -- this particular file has minified libraries included at the top, so check at the bottom).

[tim · Accepted solution]

Looks like it's not compatible with Customizer, so need to use it like this:

{% liquid
 assign url = 'theme.js' | asset_url 
 unless  request.design_mode 
   assign url = url  | append: '&enable_js_minification=1' 
 endunless 
%}
<script src="{{ url }}"  defer=defer type="text/javascript"></script>

[oreoorbitz]

Oh wow, it does work.

Nice find.

However  there's no documentation on it, and there is nothing like a liquid filter to add to the theme code to generate that param.

[tim]

 It's not a problem to DIY, like this.  Just thought I missed the announcement...

{{ 'shop.js' | asset_url | append: "&enable_js_minification=1" | script_tag }}

Or this:

Copy

 Or:

<script src="{{ 'theme.js' | asset_url  | append: '&enable_js_minification=1' }}"  defer=defer type="text/javascript"></script>

Copy

[oreoorbitz]

This is useful, nice find!

Shame there isn't a param like this for css.

[tim · Accepted solution]

Looks like it's not compatible with Customizer, so need to use it like this:

{% liquid
 assign url = 'theme.js' | asset_url 
 unless  request.design_mode 
   assign url = url  | append: '&enable_js_minification=1' 
 endunless 
%}
<script src="{{ url }}"  defer=defer type="text/javascript"></script>

[oreoorbitz]

You can also minify scss/css with ?enable_css_minification=1

[Dualsided]

If you submit valid CSS and JS, Shopify minify's automatically. The only time I find my files aren't is when something is invalid or broken in them.

Validate your CSS files here:
https://jigsaw.w3.org/css-validator/

There are a number of JS validators online too. Nothing "official" thought that I'm aware of.

[Osama-Folio3 · Accepted solution]

Early 2022 update

All JavaScript files requested from the storefront are minified by default given that they are called using the following syntax:

{{- 'some-script.js' | asset_url | script_tag -}}

However, if your files contains any ES6 statements like:

• "let" keyword
• "const" keyword
• arrow functions
• default function parameters

then your JS file won't be minified automatically. This is apparently not documented anywhere and I spent hours trying to figure out the catch here. Might be helpful for some in the future.