{% stylesheet %} and {% javascript %} tags include all code from all instances, instead of what's actually used on the page

Online Store and Theme Development
1

Short description of issue

{% stylesheet %} and {% javascript %} tags include all code from all instances, instead of what’s actually used on the page.

Reproduction steps

Create a bunch of sections, snippets and block files, then add some code inside {% stylesheet %} and {% javascript %} Liquid tags.

Visit a page on the storefront that only includes one of the sections, snippets or blocks that you did this with.

You’ll see that Shopify has included external JS and CSS files, but these contain ALL the JS and CSS that’s been defined for the whole theme, using those Liquid tags.

Additional info

This seems horribly inefficient, and therefore not how I was expecting the feature to work.

I was expecting Shopify to only include the code in the external CSS and JS files that are actually required for that page.

What type of topic is this

Bug report

2

Hello @Matthew_Hall,

It’s been this way forever, so it’s more a feature than an issue but I heard they’re working towards the behavior you’re describing.

Maybe @Liam-Shopify as more info on a potential schedule for this !

3

Thanks for the extra insight.

I used them some time ago but the caching didn’t work properly and was pretty much unusable.

They seemed to silently fix that problem at some point this year, so I have started looking into using them again for performance and developer experience reasons.

I think the documentation should be much clearer that the tags behave this way, as I don’t think it’s obvious enough that the bundles Shopify generates for shared JS and CSS from these tags are not page-specific.