[backport] feat(next/image): add lru disk cache and images.maximumDiskCacheSize#91660
[backport] feat(next/image): add lru disk cache and images.maximumDiskCacheSize#91660
images.maximumDiskCacheSize#91660Conversation
#89963) This PR adds an LRU disk cache so that reads and writes from the Image Optimization API will evict old entries based on the value of `images.maximumDiskCacheSize` configuration. The LRU ensures that cache reads bump the entry to the top so that they don't get evicted - only the least recently used entries get evicted. When `next start` is run, if there is an existing disk cache the we will replay the files in order to populate the LRU and respect `images.maximumDiskCacheSize` if it was changed. If no configuration is provided, default to 50% available disk space.
images.maximumDiskCacheSizeimages.maximumDiskCacheSize
Failing test suitesCommit: 6abb589 | About building and testing Next.js
Expand output● create-next-app --app (App Router) › should create TailwindCSS project with --tailwind flag ● create-next-app --app (App Router) › should create an empty TailwindCSS project with --empty flag
Expand output● Next Lint › First Time Setup › installs eslint and eslint-config-next as devDependencies if missing with yarn ● Next Lint › First Time Setup › creates .eslintrc.json file with a default configuration ● Next Lint › First Time Setup › creates .eslintrc.json file with a default app router configuration ● Next Lint › First Time Setup › shows a successful message when completed
Expand output● create-next-app --no-app (Pages Router) › should create TailwindCSS project with --tailwind flag ● create-next-app --no-app (Pages Router) › should create an empty TailwindCSS project with --empty flag
Expand output● CNA options matrix - app › --app --no-turbopack --js --import-alias=@acme/* --eslint --src-dir --tailwind ● CNA options matrix - app › --app --no-turbopack --js --import-alias=@acme/* --eslint --no-src-dir --tailwind ● CNA options matrix - app › --app --no-turbopack --js --import-alias=@/* --eslint --src-dir --tailwind ● CNA options matrix - app › --app --no-turbopack --js --import-alias=@/* --eslint --no-src-dir --tailwind ● CNA options matrix - app › --app --no-turbopack --js --no-import-alias --eslint --src-dir --tailwind ● CNA options matrix - app › --app --no-turbopack --js --no-import-alias --eslint --no-src-dir --tailwind ● CNA options matrix - app › --app --no-turbopack --ts --import-alias=@acme/* --eslint --src-dir --tailwind ● CNA options matrix - app › --app --no-turbopack --ts --import-alias=@acme/* --eslint --no-src-dir --tailwind ● CNA options matrix - app › --app --no-turbopack --ts --import-alias=@/* --eslint --src-dir --tailwind ● CNA options matrix - app › --app --no-turbopack --ts --import-alias=@/* --eslint --no-src-dir --tailwind ● CNA options matrix - app › --app --no-turbopack --ts --no-import-alias --eslint --src-dir --tailwind ● CNA options matrix - app › --app --no-turbopack --ts --no-import-alias --eslint --no-src-dir --tailwind ● CNA options matrix - pages › --no-app --no-turbopack --js --import-alias=@acme/* --eslint --src-dir --tailwind ● CNA options matrix - pages › --no-app --no-turbopack --js --import-alias=@acme/* --eslint --no-src-dir --tailwind ● CNA options matrix - pages › --no-app --no-turbopack --js --import-alias=@/* --eslint --src-dir --tailwind ● CNA options matrix - pages › --no-app --no-turbopack --js --import-alias=@/* --eslint --no-src-dir --tailwind ● CNA options matrix - pages › --no-app --no-turbopack --js --no-import-alias --eslint --src-dir --tailwind ● CNA options matrix - pages › --no-app --no-turbopack --js --no-import-alias --eslint --no-src-dir --tailwind ● CNA options matrix - pages › --no-app --no-turbopack --ts --import-alias=@acme/* --eslint --src-dir --tailwind ● CNA options matrix - pages › --no-app --no-turbopack --ts --import-alias=@acme/* --eslint --no-src-dir --tailwind ● CNA options matrix - pages › --no-app --no-turbopack --ts --import-alias=@/* --eslint --src-dir --tailwind ● CNA options matrix - pages › --no-app --no-turbopack --ts --import-alias=@/* --eslint --no-src-dir --tailwind ● CNA options matrix - pages › --no-app --no-turbopack --ts --no-import-alias --eslint --src-dir --tailwind ● CNA options matrix - pages › --no-app --no-turbopack --ts --no-import-alias --eslint --no-src-dir --tailwind |
| - Use CSS `@supports (font: -apple-system-body) and (-webkit-appearance: none) { img[loading="lazy"] { clip-path: inset(0.6px) } }` | ||
| - Use [`priority`](#priority) if the image is above the fold | ||
| - [Firefox 67+](https://bugzilla.mozilla.org/show_bug.cgi?id=1556156) displays a white background while loading. Possible solutions: | ||
|
|
There was a problem hiding this comment.
Not sure if this newline was supposed to be removed but its probably fine
Backports:
images.maximumDiskCacheSize#89963