Shopify offers Javascript minification?

Solved
tim
Shopify Expert
3040 170 1094

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

My post solved your problem? Like it!
Accepted Solutions (2)

Accepted Solutions
tim
Shopify Expert
3040 170 1094

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>
My post solved your problem? Like it!

View solution in original post

Osama-Folio3
New Member
1 1 2

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
205 24 114

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

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/
tim
Shopify Expert
3040 170 1094

 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
My post solved your problem? Like it!
oreoorbitz
Shopify Partner
205 24 114

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

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/
tim
Shopify Expert
3040 170 1094

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>
My post solved your problem? Like it!
oreoorbitz
Shopify Partner
205 24 114

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

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/
Dualsided
Shopify Expert
30 0 30

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
New Member
1 1 2

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.