Cloudflare caches my manifest js file (stuck at hash)

[sfenne]

Whenever a js file changes in my project, the hash changes, which intended.
However, the manifest JS file's hash never changes (stuck at hash d41d8cd9) and therefore gets cached in CloudFlare.

This results in lots of javascript errors till the CF cache is cleared manually.

As a temporary and ugly solution, I include the two main js files appending a random number

<script src="{{ asset('build/manifest.js') }}?v={{ version }}"></script>
<script src="{{ asset('build/app.js') }}?v={{ version }}"></script>

Is this a bug or am I missing something?

Thanks

[weaverryan]

Hey @sfenne!

Hmm. Indeed - this could be a bug. The has should be 100% based on the "content" of the file. In other words, if the content of manifest.js changes, then its hash should change as well. This seems like an obvious question (because you said clearing the cache fixes things), but can you absolutely verify that the contents of the file are changing (i.e. compare them before and after)? And if so, could you give an example of the type of change you make in your app that causes the file to update (but the hash to not update).

Btw, this may already be fixed in the upcoming release of Encore, which is based on Webpack 4. But, it may not be - not sure yet :).

[vkryukov76]

Hello @sfenne

Try to change filename hashing of your js-files from default chunkhash to hash:

.configureFilenames({
  js: '[name].[hash:8].js',
})

[sfenne]

I can confirm that adding configureFilenames() option like @vkryukov76 suggested solves this issue.

First of all, my manifest finally got a new hash:
manifest.5ac89521.js

Then I changed a line of js in one of my sub modules and recompiled webpack:
manifest.0858b805.js

As to @weaverryan question, I can confirm the content changed before but the hash didn't. Hence the custom URL to my assets (?v=X.X.XXX). The custom URLs made sure the client always fetched an uncached version of the assets.

Thank you guys!

[Lyrkan]

Not sure that using [hash] is a good solution, you'll get the same hash for all your files, which will invalidate your whole cache even if only one of them has been changed.

That being said I also think there is something wrong with the chunk hashes in both the Webpack 3 and the Webpack 4 versions.

First, with Webpack 3:

Take the files from this gist for instance: https://gist.github.com/Lyrkan/347273f3d83878067d2bb9e16e9a14a2

Let's compile it a first time and look at the filenames:

$ yarn encore production
Running webpack ...
 I  6 files written to build
Done in 1.75s.

$ md5sum build/*.js
a336360315a436cec2091962e1088d8d  build/manifest.d41d8cd9.js
88c5e394711dd0b1b1fcefdd7df1c759  build/page1.876f900b.js
237879dccf7ceaa4ca8d6ce4db028999  build/page2.cf68f9b3.js
8b090db5d565435aec985a71a0688d76  build/page3.19a4b42f.js
280cda2a3eb2abdf439fb1a6a87ae898  build/shared.64af6774.js

Now if we comment the .addEntry('page3', './page3.js') line:

$ yarn encore production
Running webpack ...
 I  5 files written to build
Done in 1.72s.

$ md5sum build/*.js
b254f6c80fb51605792169f005ce9a0d  build/manifest.d41d8cd9.js
e1603f458bf6505ddf1eb87fe3108570  build/page1.876f900b.js
71f9f9226ba6f8802b0b77fe4891dfb7  build/page2.cf68f9b3.js
280cda2a3eb2abdf439fb1a6a87ae898  build/shared.64af6774.js

Same filenames but only the shared entry actually has the same content than before.

However modifying the content of a single file works seems to work as intended, for instance if you put back the page3.js entry and comment the require('./vendor1') line of the page1.js file:

$ yarn encore production
Running webpack ...
 I  6 files written to build
Done in 1.57s.

$ md5sum build/*.js
a336360315a436cec2091962e1088d8d  build/manifest.d41d8cd9.js
37696263bb553839ee60170139b189dc  build/page1.b1ab2efe.js
237879dccf7ceaa4ca8d6ce4db028999  build/page2.cf68f9b3.js
8b090db5d565435aec985a71a0688d76  build/page3.19a4b42f.js
280cda2a3eb2abdf439fb1a6a87ae898  build/shared.64af6774.js

Now with Webpack 4 and the single runtime chunk enabled

The files are all the same apart from the webpack.config.js (https://gist.github.com/Lyrkan/dde6151705fc17fa9d39e4b8debd37a6).

Without any change:

$ yarn encore production
Running webpack ...
 I  6 files written to build
Entrypoint page1 = runtime.d41d8cd9.js shared.741dc494.js page1.11a80796.js
Entrypoint page2 = runtime.d41d8cd9.js shared.741dc494.js page2.16b42afe.js
Entrypoint page3 = runtime.d41d8cd9.js shared.741dc494.js page3.bac9b138.js
Entrypoint _tmp_shared = runtime.d41d8cd9.js shared.741dc494.js _tmp_shared.d4b97d94.js
Done in 3.10s.

$ md5sum build/*.js
c26fe161de9ee7b0c70976e7eb0e8dd5  build/page1.11a80796.js
775f171348e639325839f9ea6e77d98d  build/page2.16b42afe.js
f84dbc87cea81989a2c35c11005a80d2  build/page3.bac9b138.js
227795a4cf81cedbd601d9cec61433ec  build/runtime.d41d8cd9.js
4dc2d2648d4c41314921009276ae3b99  build/shared.741dc494.js

After commenting the .addEntry('page3', './page3.js') line the shared entry has changed (??) but not its filename:

$ yarn encore production         
Running webpack ...
 I  5 files written to build
Entrypoint page1 = runtime.d41d8cd9.js shared.741dc494.js page1.11a80796.js
Entrypoint page2 = runtime.d41d8cd9.js shared.741dc494.js page2.16b42afe.js
Entrypoint _tmp_shared = runtime.d41d8cd9.js shared.741dc494.js _tmp_shared.5b467cb5.js
Done in 1.96s.

$ md5sum build/*.js
c26fe161de9ee7b0c70976e7eb0e8dd5  build/page1.11a80796.js
775f171348e639325839f9ea6e77d98d  build/page2.16b42afe.js
227795a4cf81cedbd601d9cec61433ec  build/runtime.d41d8cd9.js
0fdb2988e05c3d65881d1816cdb0eb39  build/shared.741dc494.js

After putting back the page3.js entry and commenting the require('./vendor1') line of the page1.js file:

$ yarn encore production
Running webpack ...
 I  6 files written to build
Entrypoint page1 = runtime.d41d8cd9.js page1.e95cd4e4.js
Entrypoint page2 = runtime.d41d8cd9.js shared.741dc494.js page2.16b42afe.js
Entrypoint page3 = runtime.d41d8cd9.js shared.741dc494.js page3.bac9b138.js
Entrypoint _tmp_shared = runtime.d41d8cd9.js shared.741dc494.js _tmp_shared.d7e5c3ce.js
Done in 2.06s.

$ md5sum build/*.js
1e8c307b147a28753c4e410e3c4f3bb8  build/page1.e95cd4e4.js
8c355d6ccb770bd049fd9461f3d45089  build/page2.16b42afe.js
ce821f65d965630e1e745b147fe1ba26  build/page3.bac9b138.js
01c8731923a46c30aaed248b3d094785  build/runtime.d41d8cd9.js
f1010ea121aac7146c93b55e1a7b3d81  build/shared.741dc494.js

All the files are different from the first test but only the page1 entry got a new filename!

[Lyrkan]

Doesn't seem to be a problem anymore.

Using https://gist.github.com/Lyrkan/dde6151705fc17fa9d39e4b8debd37a6 with no change:

$ md5sum build/*.js 
362cbb91e71cfb1e96ae994325b208c5  build/page1.3fd51c00.js
b427b4c03250758aa7943840459f177b  build/page2.a654275b.js
2e5a3fbfd951c7370f3c7d6c1e4d90b3  build/page3.d32605c3.js
73a6151a73b9717f298fd4cbef4f169b  build/runtime.f44b3d47.js
f39df639722ec9b9aadf7e72f32711f7  build/shared.0d04a7ca.js

After commenting out addEntry('page3', './page3.js'):

$ md5sum build/*.js
362cbb91e71cfb1e96ae994325b208c5  build/page1.3fd51c00.js
b427b4c03250758aa7943840459f177b  build/page2.a654275b.js
73a6151a73b9717f298fd4cbef4f169b  build/runtime.f44b3d47.js
f39df639722ec9b9aadf7e72f32711f7  build/shared.0d04a7ca.js

After putting the addEntry back again and commenting out the require('./vendor1') from page1.js:

$ md5sum build/*.js
9b82e76bdf2d8ce4efc93e184585fa94  build/page1.f9d54fd8.js
b427b4c03250758aa7943840459f177b  build/page2.a654275b.js
2e5a3fbfd951c7370f3c7d6c1e4d90b3  build/page3.d32605c3.js
73a6151a73b9717f298fd4cbef4f169b  build/runtime.f44b3d47.js
f39df639722ec9b9aadf7e72f32711f7  build/shared.0d04a7ca.js

Feel free to re-open if you're still able to reproduce the issue.