how to add [contenthash] to the file names at build ? [solved]

[wannabefree]

Hi,
The default Quasar build process creates the /dist files with the same names on every run.

When redeploying a small pwa app for testers, I noticed this was a problem because previous .js and .css files were cached.

When digging in the docs, I found out Webpack provides a [contenthash] variable to add to file names to ensure that distributed files have a new name as soon as they have changed.

Unfortunatly, I’m newbie and this is my first Quasar app, so I have no idea how to setup quasar.conf.js to enable this webpack feature.

Any help will be appreciated

[s.molinari]

Um, Quasar does add a hash to the built files.

I just ran a build on an initial project and all the js files have hashed names.

Scott

[wannabefree]

Hi, Scott, yes, but but this default hash has the same for value build after buid. What i’m looking for is a sort of checksum hash that would change each time the underlying source files have changed.

[wannabefree]

I added the option webpackManifest as below to quasar.conf.js which seems to do what i was looking ie the build bundle names change when the source is updated. I’ll verify if this does solve the cache issue i was trying to manage and let you know.

The docs for this option states “Improves caching strategy. Use a webpack manifest (runtime) file to avoid cache bust on vendor chunk changing hash on each build.” which is not entirely clear to me.

build: {
webpackManifest: true
}

[s.molinari]

I just made a change to the router and the app.js file changed.

I also spoke to Razvan about this and he said he spend a lot of time getting the cache busting precise, meaning, if you change only some of the app, only those files with the changes get new hashes.

Scott

[wannabefree]

I double checked and you’re right, bundle hash names change when needed. Unfortunatly it is not enough to ensure that the browser reload correctly the app, it seems that users also need to restart the browser (or kill and reload the app on mobile) in order to load and run a new version. if they don’t, they might stay with an outdated cache for a while.

[s.molinari]

Yes, just learned this myself. With PWA, you should also indicate to the user there is a newer version available and they should reload their app. It’s standard practice, because the service worker has no clue about version staleness.

https://medium.com/js-dojo/vuejs-pwa-cache-busting-8d09edd22a31

I realize that is for Vue-CLI, but the concept is the same for Quasar.

Scott