Gatsby: Caching JavaScript

[ascorbic]

What is the current best practice for caching js files? The docs on caching haven't been updated for v2, but suggest that Webpack 3 will enable them to be cached. Is it OK to send long cache control expiry times now?

[kakadiadarpan]

@ascorbic you can read up on caching JavaScript here. Webpack(Gatsby uses v4 now) doesn't do any kind of out of the box for cahing. Also, you can use gatsby-plugin-offline to cache your static assets using a service-worker.

EDIT: Updated the link above.

[ascorbic]

Is that right link? I can't see anything there about caching JavaScript. I do use gatsby-plugin-offline. My question is about Cache-Control headers. I deploy the site from CloudFront, and need to know if it's safe to mark the JS as immutable with a long cache time, as I do with the JSON and images, or if they have to be revalidated every time, like the HTML. I'd be happy to update the docs on caching, as I'm working a lot on it right now, but I need to know what the situation is.

[kakadiadarpan]

I updated the link above, can you check it again?

Caching JavaScript

[ascorbic]

That's the same document that I linked in my original question. It hasn't been updated for Gatsby 2, and implies that it will change things, which is why I'm asking.

[oorestisime]

I was also wondering this for th v2. Plus if anyone could give any pointers on how to actually add the headers for gh-pages ;)

[grubersjoe]

I'm also curious, how to correctly configure the cache-control header for Gatsby 2. Right now I set it according to the v1 documentation as follows (Apache 2.4):

# ./static/.htaccess

# Never cache HTML and JS(?)
<FilesMatch ".(html|js)$">
    Header set cache-control "public, max-age=0, must-revalidate"
</FilesMatch>

Since no <Directory> directives are allowed inside of .htaccess files, I've created a second one in another static directory inside the top level static directory to handle static files:

# ./static/static/.htaccess

# Cache ALL static files forever
<FilesMatch ^>
    Header set cache-control "public, max-age=31536000, immutable"
</FilesMatch>

Not very elegant, but this way both .htaccess files are copied to their correct destinations when executing gatsby build (to the root directory and ./static respectively).

So... Can JS files be cached as well now?

[jarreds]

FWIW, I have been caching all non-.html files that have a hash in the name indefinitely on v2 without issue.

[centrical]

@jarreds - just so I get it: did you update the website in the meantime? As in: do the hashes change with each update, so you can indeed cache them forever? Thanks!

[jarreds]

@centrical yes, multiple daily updates.

[kakadiadarpan]

@ascorbic I hope your question has been answered by @jarreds

[abumalick]

Just opened a new issue about updating the documentation for this : https://github.com/gatsbyjs/gatsby/issues/9151

[gjurgens]

@ascorbic I hope your question has been answered by @jarreds

I'm on v2 and still don't see this fixed. I've made some changes on my pages, and after rebuild, I see the same hashes on my files so I think those headers are still needed in v2.

[DSchau]

@gjurgens Hi Gabriel!

Rather than comment on several issues, would you be able to comment on #9151 (or open a new issue) with any reproduction steps and/or a repo that we could take a look at?

Thanks so much!

[DSchau]

@gjurgens additionally, we have an integration test that tests just this caching/hashing. It's called long-term-caching, and is run on every build as part of the CI process. If we break that functionality, we'll be made aware of it as soon or if it breaks.

[gjurgens]

@DSchau : Sorry about that! I didn't knew that actual work was done to fix this issue. I thought that the documentation was outdated and that this issue wasn't addressed yet. I will try to reproduce it and make a test case. Thanks for your help!

[gjurgens]

@DSchau running the integration tests I realized that I was checking the hashes on the "component---src-pages-[name]-js-[hash].js" files but not the other files where my modifications were actually applied. I assumed that changes made on page components where applied on those files, so, when I saw that those files had the same hash after builds, I thought that we still needed to avoid js caching.

Thanks and sorry about the confusion.

[DSchau]

@gjurgens thanks for checking it out, and validating! I appreciate it, and nothing to be sorry about! Thanks for using Gatsby!