A plugin to make building with Eleventy and Netlify a joy!

• Caches images generated by @11ty/eleventy-img across builds
• Caches assets fetched by @11ty/eleventy-fetch across builds
• Caches any other folders of your choice (optional)

Install plugin via your package manager of choice:

npm i netlify-plugin-11ty

And add the plugin to your netlify.toml file:

[[plugins]] package = "netlify-plugin-11ty" [plugins.inputs] # eleventy-img outputDir, path relative to publish directory cache_img = 'img/' cache_img_httpHeader = false # eleventy-fetch cacheDir, path relative to publish directory cache_assets = '../.cache/' cache_other = []

Make sure the path for cache_img is correct. Aand you're done! 🥳

You can read Netlify's documentation about Plugins here: https://docs.netlify.com/configure-builds/build-plugins/

Note: If your builds are failing, the version of Node you're using is probably not supported by Netlify. Try Node v16.x.x. See the FAQs section for more info.

Type: String or Array of Strings
Default: 'img' (relative to the publish directory)

Path to the folder(s) in which files generated by @11ty/eleventy-img are stored, relative to the publish directory. Can be a String or an array of Strings.

If set to false, files generated by @11ty/eleventy-img are not saved in Netlify cache.

Type: Boolean
Default: false

If set to true, files generated by @11ty/eleventy-img will be served with http header cache-control: public, max-age=31536000, immutable.

Files generated by eleventy_img have a hash calculated using file content and Sharp plugin options in their name by default (starting from #116), so you can cache them indefinitely. Don't use this if you're using remote images.

⚠️ Caution:

• If you are using remote images, this option should be false (default).
• If you are using custom filenames that don't include a hash, this option should be false (default).

Type: String or Array of Strings
Default: '../.cache' (relative to the publish directory)

Path to the folder(s) in which remote assets fetched by @11ty/eleventy-fetch are cached, relative to publish directory. Can be a String or an array of Strings.

If set to false, assets fetched by @11ty/eleventy-fetch are not saved in Netlify cache.

Type: String or Array of Strings
Default: [] (relative to the publish directory)

Paths to any other folder(s) you'd like to cache across Netlify builds. If these folders exist before restoring Nelify cache, their content will be merged and overwritten with content from the cached folders.

If your images are written to _site/img (default), use rimraf '_site/!(img)'.

If they are in a subdirectory, say _site/assets/images, use rimraf '_site/!(assets)' '_site/assets/!(images)'.

If your build fails with

11:37:10 AM: Uncaught exception, the process will now terminate… 11:37:10 AM: Error: Unable to deserialize cloned data due to invalid or unsupported version. 11:37:10 AM: at parseChannelMessages (node:internal/child_process/serialization:97:20) 11:37:10 AM: at parseChannelMessages.next (<anonymous>) 11:37:10 AM: at Pipe.channel.onread (node:internal/child_process:619:18)

The version of Node you're using is probably not supported by Netlify.

Try setting Node version to 16.x

echo "16" > .nvmrc

More info about this error:

• https://answers.netlify.com/t/netlify-build-cache-error/78115/4
• https://answers.netlify.com/t/build-failing-after-upgrade-to-node-18/75774

See this guide for more ways to set Node versions: https://docs.netlify.com/configure-builds/manage-dependencies/

Yes!

The speed-up, ofcourse, depends on how many images your website has, but here is a benchmark I used when developing this plugin:

Read more

• Subfont
• Inline Critical CSS

Please create an issue :)

MIT

If you need this repository with a different License, please create an issue.