component updating only after clearing browser's cache

[luzdealba]

Hi, not sure if this is a http-vue-loader issue or something else, the thing is that

const components = {
  'deck-button': httpVueLoader('components/DeckButton.vue'),
  'deck-card': httpVueLoader('components/DeckCard.vue'),
}

Only deck-button would update every time, but no deck-card, unless I clear the cache.

I've tried everything:

• using httpVueLoader()
• using httpVueLoader.register()
• using httpVueLoader
• using Node.js http-server
• using Python http.server

.... nothing worked.

Anybody, any idea?

[luzdealba]

I couldn't find the reason for this issue but I solved it by adding a hash at the end of the call for each resource:

var hash = Math.random().toString(36).substring(2, 8) // prevent caching

const components = {
  'deck-button': httpVueLoader('components/DeckButton.vue?' + hash),
  'deck-card': httpVueLoader('components/DeckCard.vue?' + hash),
}

[Diaskhan]

By the way its only a solution to tell chrome that file has changed! On client side!

The other option change header of http Last-Modified! But is server side feature !

[trekze]

is there a clean solution than this @FranckFreiburger ?

I've been running httpvueloader in production only just realized this is what I've had to ask users to do hard refreshes so often.

[trekze]

I've gone with the following. Declare your app version somewhere:

window.CRversion = '1092';

And then in sfcLoaderOptions:

  getFile: async function (url) {
        const response = await fetch(url + '?r=' + window.CRversion);

This will prevent cached versions from the being downloaded when you updated your build number.