I recently encountered an issue whereby the browser always cache the previous version even though a newer version of deployment has been released. The users always need to keep on refreshing or perform hard refresh in order to get the latest updated files. Is there anyway to solve this?

I saw web pack recommend something like contenthash but it doesn't seem to be working. From what I know, contenthash changes only applies on files with changes. Am I missing something?

// Host module
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].chunk.js',
    publicPath: '/',
    clean: true,
  },

// child module
  output: {
    filename: '[name].[contenthash].js',
    publicPath: '/someChildName/',
    clean: true,
  },

I recently encountered an issue whereby the browser always cache the previous version even though a newer version of deployment has been released. The users always need to keep on refreshing or perform hard refresh in order to get the latest updated files. Is there anyway to solve this?

I saw web pack recommend something like contenthash but it doesn't seem to be working. From what I know, contenthash changes only applies on files with changes. Am I missing something?

// Host module
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].chunk.js',
    publicPath: '/',
    clean: true,
  },

// child module
  output: {
    filename: '[name].[contenthash].js',
    publicPath: '/someChildName/',
    clean: true,
  },

• javascript
• reactjs
• webpack
• caching
• webpack-module-federation

• How are your assets being served to the user? As there are likely cache control headers that can be adjusted if you are wanting to disable caching entirely. As for contenthash, I believe that is just a hash of the contents of the file. Meaning that the same file will produce the same hash, indicating that the cached version can be used. – Michael Commented Feb 6 at 13:49

1 Answer 1

There is a doc in the source on cache busting, which does not seem to work with the new module federation but does describe a solution using ExternalTemplateRemotesPlugin and a function that generates random values.

The idea is you append a random query string to the URL of your remote, ensuring the latest version of the remote entry will be fetched.

{
  remotes: {
    'my-remote-1': 'my-remote-1@http://localhost:3001/remoteEntry.js?[getRandomString()]',
  }
}

You can combine this with content hashes to ensure cache busting for other chunks.

Alternatively, never allow to cache the remote entry.