There are about 20 apps installed on our shop. Different apps are used on different pages. For example, there are apps which are used on the product page only.
However I see that all apps are loaded on every page. Looking into page source I see JavaScript function asyncLoad
which is part of built-in {{ content_for_header }}
variable. This function load scripts for all apps on every page. So, can I restrict this somehow? I mean - to avoid of downloading scripts/css/whatever of apps which I don't use on the specific page. For example, on the home page I need just a couple of apps active, not all 20 of them. Didn't find the answer in docs or Google.
It sounds like you've already figured out a lot about how Shopify allows apps to load their scripts, so you're most of the way there!
When I've needed to selectively disable apps, I have removed them from the asyncLoad
function using something like the following:
{% capture modified_content_for_header %}{{ content_for_header }}{% endcapture %}
{% if template.name == 'index' %}
{% assign modified_content_for_header = modified_content_for_header | remove: 'some_app_url.js,' %}
{% endif %}
<!-- If you have a lot of templates you are checking, a case/when using template.name might be appropriate -->
{{ modified_content_for_header }}
I like using {% if template.name == value %} rather than {% if template contains value %} for template checks, as that ensures I don't accidentally get a false positive for a template suffix that contains one of the other template types for some reason, like a collection.alternate_product_layout
or something silly like that.
Disclaimer: Messing with 3rd party apps by removing their script files may have unexpected side-effects, so always be sure to exercise caution and test thoroughly on an unpublished theme!