Shopify CDN Cache issues with CSS assets

[knjshimi]

Hi guys, again thanks for the amazing work on the vite-plugin-shopify.

I had css cache issues on production, and it seems it's due the changes introduced via 45a3e28 (Remove querystring from asset URLs).

https://github.com/barrel/barrel-shopify/blob/8619c4a8bb73fec3bda132e8e68d214ff3eff98d/packages/vite-plugin-shopify/src/html.ts#L162

I believe this was a fix for a Vue issue (#13), but maybe there's a way to solve both the cache and the Vue problems.

At the moment I'm using patch-package to work around this issue, but I imagine other people will have problems.

[montalvomiguelo]

@kenji-twp Thanks for using our plugin and helping us improve it 🙏

Are you modifying dist file names in some way? Prolly I would need to take a look at your vite config file.

By default, the dist file names contain a [hash] string that is generated based on the content of the asset e.g. theme.856128a9.css

That [hash] will help us deliver the latest version for a given asset and using the ?v=N param would not be necessary (#21).

assets-css.mov

https://montalvomiguelo.myshopify.com/?preview_theme_id=124852011056

[slavamak]

Hey guys! I think I caught the problem that @kenji-twp mentioned. Watch the video to see it with me

vite.entrypoint.cache.mp4

Here I use dynamic module loading, like as hydrogen-theme. So if we don't make changes to the entry point file, the hash is not updated. But for example we change the styles, then the hash for the styles is updated but for the entry point the hash remains the same. This is strange because the content of the file has changed.

I'm not sure exactly how it works, but the shopify cache doesn't update the entry point file (maybe because the file size hasn't changed) and I get an error that the new styles file isn't found. Do you know how it works, maybe I'm missing something?

Also, I don't know what the problem was with the vue components, but if for some reason we can't use ?v= from shopify cdn I suppose we could avoid it if we added our timestamp to the entry point files that were changed during the build. Does it make sense?

`{{ '${fileName}' | asset_url | split: '?v=' | first | append: '?v=${timestamp}' }}`

[montalvomiguelo]

Thanks for that @slavamak 🙏 , I can reproduce the bug on my end.

That would work. The thing is that when we leave the ?v= param, JS chunks could download twice (First, when loading them from liquid files using the asset_url filter. Then, when other JS chunks import the same file). That was the main reason why I removed the ?v param in #21

I think we would need a way to make the [hash] change based on the content of the file. Not sure why it's not changing right now.

[slavamak]

thanks @montalvomiguelo, got it. Yes, it looks like this is a known issue in the Vite, because I found this #9583

[slavamak]

I've studied it a bit. It seems we should wait for Vite v4. Because they will update the Rollup version to v3, in which the hashing algorithm has been redesigned and more. I also played with this hook augmentChunkHash, and it seems to solve our problem. in fact we will update the hash of the chunk if the imported modules have been updated. But I think it can be solved more elegantly 😅 let's see

function updateChunkHash(): Plugin {
  return {
    name: 'update-chunk-hash',

    augmentChunkHash({ viteMetadata }) {
      const importedModules = Array.from([
        ...viteMetadata.importedCss,
        ...viteMetadata.importedAssets,
      ])

      if (importedModules.length) {
        return importedModules.toString()
      }
    },
  }
}

[montalvomiguelo]

Thanks a lot for that @slavamak 🙏🙏

I think it's a good workaround while we wait for Vite 4. Please let me know what you think about #27 cc @kenji-twp

[slavamak]

This works fine for me! The only thing is that with every build the hash will change even if there were no changes in the files, but I think that's ok as a temporary solution, Thank you!

[slavamak]

This seems to have been fixed in vite 4.0.4 :)