FIrst of all, love Netlify! So simple and powerful.
You can find a live deploy of my app here for reproducing the problem described below:
Now, my problem: I am using Webpack to bundle all my JS. On bundling, Webpack adds a content hash to the filename (‘cache busting through fingerprinting’) and adds the content hash to the JS script src in the HTML. Thus, I never have to worry about clients using outdated JS from their cache if my JS changed.
Because of this, I would like to change the caching headers of my JS files to a high max-age. Clients should cache the JS files for a very long time because my content hash fingerprinting will ensure that they get any updated JS anyways.
I was able to get that to work with Netlify in one of two ways:
- Use the netlify.toml file to specify the custom headers
- Enable the “Bundle JS” option in the post-processing. Your docs are not explicit that this option actually affects the caching policy but I inferred it from a blog post - might make sense to slightly tweak your docs there.
I prefer option 1 because it leaves the bundling within my control.
So what is the problem?
I also prefetch two key JS files (therapist.js and session.js). These prefetched JS files then get prefetched with the following cache-control header:
public, max-age=0, must-revalidate
This is not what I want. What I want is for these prefetched files is more something like this:
This second cache-control header is what I automatically get when I choose option 2 above (enable the “Bundle JS” postprocessing option). However, it only works for regular requests for this JS from the HTML script tag. It doesn’t work when I request the same JS files via prefetching.
Any ideas? What am I doing wrong?