Skip to content
This repository was archived by the owner on Jan 28, 2025. It is now read-only.

feat(lambda-at-edge): support image optimization #829

Merged
merged 20 commits into from
Dec 8, 2020

Conversation

dphang
Copy link
Collaborator

@dphang dphang commented Dec 2, 2020

Fixes: #725 by supporting the image optimizer introduced in Next.js 10 and hence the image component.

  • Added new image lambda handler to handle image optimization requests only
  • Most of this is a port of the Next.js server image-optimizer and related files, with a modification to retrieve the file from S3 instead (e.g for files in public directory).
  • Added a bunch of node_modules used for sharp (image library). These have been specifically built for Lambda Node 12.x platform (using the lambdci/docker-lambda image) and added statically.

@codecov
Copy link

codecov bot commented Dec 2, 2020

Codecov Report

Merging #829 (3ccd9b8) into master (468da0d) will decrease coverage by 0.35%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #829      +/-   ##
==========================================
- Coverage   80.69%   80.33%   -0.36%     
==========================================
  Files          57       63       +6     
  Lines        1937     2217     +280     
  Branches      434      500      +66     
==========================================
+ Hits         1563     1781     +218     
- Misses        314      376      +62     
  Partials       60       60              
Impacted Files Coverage Δ
...ages/libs/lambda-at-edge/src/routing/redirector.ts 82.75% <0.00%> (ø)
...rless-components/nextjs-component/src/constants.ts 100.00% <0.00%> (ø)
packages/libs/lambda-at-edge/src/image-handler.ts 97.05% <0.00%> (ø)
...es/libs/lambda-at-edge/src/lib/sendEtagResponse.ts 57.14% <0.00%> (ø)
...ages/libs/lambda-at-edge/src/images/imageConfig.ts 100.00% <0.00%> (ø)
...ages/libs/lambda-at-edge/src/s3/s3RetryStrategy.ts 50.00% <0.00%> (ø)
...s/libs/lambda-at-edge/src/images/imageOptimizer.ts 75.00% <0.00%> (ø)
...ages/libs/lambda-at-edge/src/images/serveStatic.ts 37.50% <0.00%> (ø)
packages/libs/lambda-at-edge/src/build.ts 91.86% <0.00%> (+0.26%) ⬆️
...rless-components/nextjs-component/src/component.ts 91.30% <0.00%> (+0.51%) ⬆️
... and 1 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 468da0d...3ccd9b8. Read the comment docs.

@dphang dphang changed the title feat(lambda-at-edge): support image optimization [WIP] feat(lambda-at-edge): support image optimization Dec 3, 2020
@dphang dphang marked this pull request as ready for review December 3, 2020 05:56
@dphang
Copy link
Collaborator Author

dphang commented Dec 3, 2020

@danielcondemarin this is done, could you please review when you have some time?

Unfortunately I don't know how to exclude the sharp_node_modules files from appearing in the PR. But the changes are mostly in lambda-at-edge in the images directory (for image optimizer) and a new image-handler. There are also some changes in Next.js component to add the new cache behaviors. And of course, unit tests.

Will try to add more test coverage afterwards for imageOptimizer and also exclude some scripts from code coverage.

export type ImageConfig = {
deviceSizes: number[];
imageSizes: number[];
loader: "default" | "imgix" | "cloudinary" | "akamai";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need imgix, cloudinary, akamai here?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually I didn't try these other loaders, will check on it but I think they go directly to those URLs

@dphang dphang merged commit f6c5156 into master Dec 8, 2020
@delete-merged-branch delete-merged-branch bot deleted the dphang/image-optimizer branch December 8, 2020 02:42
@oddnavy
Copy link

oddnavy commented Dec 8, 2020

Awesome work! 🤞 for a release including this one soon

@marcfielding1
Copy link

Hey guys, I can test this on a LOT of images if you'd like - this is in the alpha release?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

NextJS 10.0.0 <Image /> component causes 404
4 participants