Can you concatenate all js into one theme.js file?

Ben31
Trailblazer
196 8 141

Hi There,

While our previous non-shopify site loaded a couple of libraries, we were able to force all other js into a single theme.js file, and reduce the number of file requests per page load.

Is there a way to do this in Shopify?

If not, can I make a feature request for a system where apps register their js and css, and Shopify has a way of concatenating and minifying everything to serve a single, site-wide theme.css and site-wide theme.js file?

Our little shop is currently loading 28 separate js files which seems crazy for what it does.

Cheers

Replies 3 (3)

ErSanjay
Shopify Partner
293 20 42

you can call that js based on that page.

 

or you can marge into one file it will increase the score 

Business Owner & Shopify app developer - shopify consting - Full Stack Sofware Engineer
Er Sanjay

Not applicable

Hi Ben31,

 

All Shopify core files and app files are stored in the {{content_for_header}} variable.

It is not desirable to edit this variable. It is possible, but this may lead to unforeseen circumstances in the future. But all third-party js files that are connected outside the content_for_header can be combined.


To begin with, a large number of js files depends on the theme and the number of installed apps. If you have a lot of apps, there will be a lot of js connections. But sometimes it happens that the theme itself is not optimized. Can you please tell me how many apps are installed at your shop and the name of the theme? Also, if you can share the URL of your shop with us.

 

Hope that helps you. 

 

Best Regards,

Aibek

 

P.S If you wish our agency can help you with optimization, you can subscribe here: https://mailchi.mp/d3382f3c7380/7xc6wdulhe


Mircea_Piturca
Shopify Partner
1547 44 345

Applications JS files are injected via {{ content_for_header }}. Without doing a massive hack, you can not touch those.

You can bundle your theme JS files. You can do it manually (time-consuming) or have a build system in place that will do this automatically on every deployment.

But there is more to it. Do you want all of your JS files bundled to be served on a page that only uses 10% of what is there? 

For me, this does not make much sense in 2021. With a massive bundle, you lose control of what you want to serve.

It makes more sense to load only what you use and control exactly when and how you want those files to be loaded (blocking, defer, async).

Finally—Add variant descriptions to your products