Solved

Shopify offers Javascript minification?

tim
Shopify Expert
3212 223 1171

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).

Accepted Solutions (2)
tim
Shopify Expert
3212 223 1171

This is an 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>

View solution in original post

Osama-Folio3
Visitor
1 1 7

This is an 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.

View solution in original post

Replies 7 (7)

oreoorbitz
Shopify Partner
242 29 129

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.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.
tim
Shopify Expert
3212 223 1171

 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
Shopify Partner
242 29 129

This is useful, nice find!

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

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.
tim
Shopify Expert
3212 223 1171

This is an 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
Shopify Partner
242 29 129

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

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.
Dualsided
Shopify Expert
30 0 33

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
Visitor
1 1 7

This is an 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.