Hi, has been looking at the Brooklyn theme demo shop and noticed that it loads theme javascript using this URL:
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).
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.
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
This is useful, nice find!
Shame there isn’t a param like this for css.
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
%}
You can also minify scss/css with ?enable_css_minification=1
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.
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:
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.