Why Theme.js ?

Highlighted
New Member
6 0 0

From what I have seen so far most theme developers, will compile all their javascript code into one big file (app.js / theme.js) which will be loaded on every single page of the Shopify Frontend.

 

Can anyone outline reasons, why this would make more sense than just creating smaller code modules that are only loaded once they are requiered?

 

0 Likes
Trailblazer
299 68 60

Hi, @Jan_,

 

This is Evita from On The Map.

 

When you write the code, you create smaller modules of the code, but once the code is compiled, it puts every module in one file, that's why it looks so messy. Adding the script with one file is much easier, instead of adding 3 different modules in the body. Example: 

 

// One theme.js file
<script src="theme.js"></script>

// Multiple files
<script src="module1.js"></script>
<script src="module1.js"></script>
<script src="module3.js"></script>

 

And it infects site speed, reading one file is faster than reading 3 files, no matter how large is the file.

The best practice is to import one file and access it everywhere instead of adding the same file over and over again in different pages.

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
New Member
6 0 0

Hi Evita,

 

thank you for the explanation. I can imagine that more requests / more files will take longer to process,

 

Wouldn´t it then be a good idea to make one large thme.js.liquid  file where you can include certain snippets whenever they are needed?

 

I assume the downside of this would be, that it would only speedup the very first website visit and not the overall site speed as caching wouldn´t be possible then.

 

What are your thoughts on that ?

0 Likes
Trailblazer
299 68 60
Yes, the first page would be slower, but you wouldn’t notice it. Many pages have this already.
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes