Persist the Nuxt cache between Netlify builds for huge build speed improvements! ⚡️ One-click install to add this to your Nuxt site
If you don’t want to use the UI-based installation, you can install manually using
Add the following lines to your
[build]publish = "public"[[plugins]]package = "netlify-plugin-cache-nuxt"
[[plugins]] line is required for each plugin, even if you have other plugins in your
netlify.toml file already.
This plugin determines the location of your
.cache folder by looking at the
publish folder configured for Netlify deployment (this must be set in your
netlify.toml in the
[build] section). This means that if your Nuxt site successfully deploys, it will be cached as well with no config required! 🎉
How much of a difference does this plugin make in build times?
Each Nuxt site is different, so build times vary widely between them, but one common slowdown in Nuxt builds is processing and transforming images. Nuxt is smart enough to check if these transformations have already been done and skip them, but in order to get that benefit in a build pipeline (e.g. Netlify) the
.cache directories need to be preserved between builds. That’s what this plugin does!
Note: To be determined, don't look at the stats, don't
|* 231 GraphQL queries
* 1,871 images
* 224 pages
|293207ms (build log)||72835ms (build log)||75%|
|* 5 GraphQL queries
* No image processing
* 32 pages
|22072ms (build log)||15543ms (build log)||30%|
tl;dr: Repeat builds with lots of images will be much faster. With few or no images, the difference will be there, but it won’t be as pronounced.
Want to learn how to create your own Netlify Build Plugins?
Check out Sarah Drasner’s excellent tutorial!