Does Brooklyn theme offer Javascript minification?

Technical Q&A
1

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=1793745868414032183

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

2 Likes
2

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.

3

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

1 Like
4

This is useful, nice find!

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

5

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 
%}
4 Likes
6

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

1 Like
7

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.

1 Like
8

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.

7 Likes