⚡ Netlify Plugin: Cache hashed javascript files

If you update a website and javascript files have changed, new users will of course have no problems. But what if a user is currently visiting a webpage and requests a new JS module based on the loaded page? Chances are that the module is no more available if you have changed the JS file. This plugin will cache JS files between builds to ease that problem (if you do lots of updates, you might want to take this further and cache modules for a certain duration).

💿 Install

Add the following lines to your netlify.toml:

[[plugins]]
package = "netlify-plugin-cache-jshash"
  [plugins.inputs]
  # Optional (but highly recommended). Defaults to ["dist/**/*.*.js", "build/**/*.*.js"].
  paths = ["/assets/js/**/*.*.js"]

This plugin only takes one input named paths: an array of files and/or directories relative to your project's root. These files/directories are restored before a build and saved in cache after a build if it is successful.

🚨 Important: paths defaults to [".cache"], but it's highly recommended you set this yourself based on the tool(s) you're using to generate your site. See examples below.

Read more about plugin configuration at the official Netlify Plugin docs.

👩‍💻 Usage

• Hugo: Caching the resources directory can speed up your build greatly if you process a lot of images, or compile SASS/SCSS via Hugo pipes. You can also cache the public directory to avoid completely rebuilding the entire site on each deploy. More info here.
• Gatsby: By default, the .cache directory holds persistent data between builds. You can also cache the dist directory to avoid completely rebuilding the entire site on each deploy. More info here.
• Jekyll: A caching API was added as of v4. The notoriously slow SSG can become (relatively) faster by caching the .jekyll-cache directory. More info here.
• Next.js: The .next directory holds the build output. More info here.
• Anything else: This is the reason I kept this plugin as generic as possible! Research the caching behavior of your static site generator (and how to customize it if necessary). Feel free to open a PR and list it here as well!

🐛 Debugging

This plugin doesn't provide a way to output a list of files that were cached or restored, because Netlify already provides an official plugin named netlify-plugin-debug-cache to do exactly that. No need to re-invent the wheel!

You can add the debug plugin after this plugin in your netlify.toml. (And yes, you need a [[plugins]] line for each plugin you add.)

[[plugins]]
package = "netlify-plugin-debug-cache"

The debug plugin will generate a file named cache-output.json at the root of your project's publish directory. See an example file or learn more about this plugin.

📜 License

This project is distributed under the MIT license.