Cache eleventy_img generated images

[zeroby0]

Adds filesystem caching of images generated by eleventy_img to speed up build time. Cache is persisted locally and on Netlify.

Case	Before	After
Build time	48 seconds	12 seconds
Serve time	42 seconds	7 seconds

Serve time is the time from running yarn run serve and content being available on localhost:4001.

Read more at:

• https://github.com/zeroby0/netlify-plugin-11ty/
• https://github.com/11ty/eleventy-img/pull/116

If this is merged, I'll notify here when 116 is merged. All the images look okay in local testing, but please test when merging.

Thank you for opensourcing your website, it was very helpful in verifying that the patch is error-less. Here is a PR as a token of gratitude :)

[AleksandrHovhannisyan]

This is awesome, thanks again! I'll test this thoroughly, but I may hold off on merging until your PR to the Eleventy image plugin gets reviewed, just to be on the safe side.

[zeroby0]

Glad you like it! :D

I hope it gets reviewed soon. It's a pretty simple change though, it's puzzling how no one has reviewed it yet. I should probably make a tool to make the review easier.

[zeroby0]

Even on rebuilds? The first local build would take just as much time as normal, but subsequent rebuilds should be much faster. Either that or your computer is really really fast and I'm jealous 😄

[AleksandrHovhannisyan]

Yeah, rebuild took around 90 seconds total (which is typical for this site locally). My laptop is likely slower than yours, lol.

[zeroby0]

That's interesting.. As long as the _site/assets/img folder is preserved, rebuilds should be faster. I did change the clean script to rimraf '_site/!(assets)' '_site/assets/!(images)' to preserve it, could that be not working somehow? Which OS are you on?

Here is what I ran on linux:

git clone https://github.com/zeroby0/aleksandrhovhannisyan.com.git
git checkout cache
yarn
yarn run build # 42.6 seconds
yarn run build # 10.3 seconds

[AleksandrHovhannisyan]

Sorry for the delayed response—I'm on Windows (WSL), so that's likely the issue.

The good news is that the local builds aren't slower, and if I ever get a better dev setup going, they'll be faster 😄

[zeroby0]

Maybe, I'll don't have a windows machine around, but I'll try to see it in a VM in the weekend.

Also, the PR is under review and I'm so excited!

[AleksandrHovhannisyan]

I noticed! They even tweeted about it 😄

[zeroby0]

@AleksandrHovhannisyan You're running WSL 2, right?

I tested it directly without wsl, and that worked as expected. Will test wsl now.

[AleksandrHovhannisyan]

@zeroby0 I'm actually running WSL1 like a scrub. (My project is in a Windows dir, so WSL1 is technically faster than 2 for me)

[zeroby0]

Smart choice!

So I tried wsl1, wsl2, and bare windows on a VM. On wsl1, with the folder in a Windows dir,

time npm run build # No cache
real 2m37.072s
user 1m37.547s
sys 0m35.422s

time npm run build  # Second run, so images are in cache
real 0m56.767s
user 0m21.453s
sys 0m18.406s

So I still have no idea why it isn't working, unfortunately 😂

Can you run this and see if the cache doesn't work there too: https://github.com/zeroby0/demo-eleventy-img-cache

[AleksandrHovhannisyan]

Sure! I'll give it a shot when I get a chance.

[AleksandrHovhannisyan]

@zeroby0 Wow I'm dumb 😅 I was testing without doing a yarn install. Should probably add a postcheckout git hook to install dependencies.

18 seconds now! Amazing stuff—will follow the 11ty PR closely and then we can point this PR to the plugin.

[zeroby0]

Haha, happens 😄 I do that sometimes too 😂

TIL about the postcheckout git hook! :D

Can't believe it's been a month since we started this PR, seems like yesterday! 😄

[AleksandrHovhannisyan]

@zeroby0 Right? I'm excited to merge this!

When you get a chance, could you update the branch to point to the 11ty image v1.0.0-beta.0 release? (Might also need to catch up w/ master). And then I'll test one more time locally + on the deploy preview, and then we should be good.

[zeroby0]

Done! :D

But you should probably wait for the second beta before merging if you're using remote URLs: https://github.com/11ty/eleventy-img/issues/123

[AleksandrHovhannisyan]

Nope, no remote URLs yet (I may support them in the future though)

[AleksandrHovhannisyan]

Works great, thanks again!