Theme App Extension Structure: JS in Liquid Block VS Asset file?

Shopify Apps
1

Conceptually, what are the differences between including custom JavaScript for a theme app extension (app block or app block embed) in the app block’s liquid file, versus a static asset file bundled with the extension?

Similarly, is there any difference between loading a JS asset via the “javascript” field in the app block settings, VS just including the tag inline in the Liquid file?

It seems like the existence of external asset files is extraneous, if you can just add tags to the liquid file itself. Is the only difference in performance optimization / load time?

2

I encountered strange behaviour with including JS/CSS assets through the schema and wrote about it in this post https://community.shopify.com/topic/1252253

I’m not sure if this is still happening, but including the assets with tags is working with custom templates as well.

3

I think the differences lie below:

inline js in liquid:

  • you can print liquid data into the js
  • you can inject your schema settings into the js
  • the js run order is controlled by you

JS asset:

  • loaded in the head tag before your liquid files
  • I don’t see it’s minimized. But it can be cached by the browser