Stripped script and stylesheet version numbers breaks Shopify cache

[ShaeS]

Within the vite-tag.liquid file that is generated on build, the plugin strips the version query parameter. This makes it so any CSS or JS changes pushed up to an already existing theme don't reflect on the front end.

{{ 'dist__theme.js' | asset_url | split: '?' | first }}

Above is the code that does this for scripts. Is there any specific reason for this? Can it be updated to be this: {{ 'dist__theme.js' | asset_url }}? Or maybe an option to do so?

[montalvomiguelo]

Hey @ShaeS , we rely on the [hash] fragment of the file names that Vite/Rollup generates out of the box to ensure we deliver the latest version of CSS/JS assets. Could you let me know if you are removing it?

The problem with having names without the [hash] is that JS chunks will download/parse/execute twice (first from your liquid file and using that ?v param, and second when importing the same module dynamically, but your modules don't know the ?v param. See https://github.com/barrel/shopify-vite/pull/21

[ShaeS]

Ah okay, I see. Yes we are removing that. The reason we are doing so is because our build output folder is the Shopify assets folder and we have our build process set to not empty that folder in case there are merchant specific files inside. This ended up having the generated assets growing over time as the old one would retain and a new one would be added.

Do you have any solution to that problem?

[montalvomiguelo]

Yes, the BAO agency shared a solution to solve this problem (:

[ShaeS]

Oh amazing, thank you Miguel!

[patrickbjohnson]

Looking at what was created by the BAO Agency (thank you btw!) seems like it requires explicitly asset directory path. Curious if there is any chance of Barrel or BAO exposing this as a configuration?

Posting here as I cannot find the BAO Agency repo :(