Refactor image optimizer static immutable header #25909

styfle · 2021-06-08T19:39:11Z

Previously we were accepting a s=1 query string parameter for static imports, but this is not necessary.

Instead, this PR looks at the file path to determine if the header should be immutable.

The nice thing here is we don't need to worry about someone trying s=1 with an external image or 3rd party loader. In that case, we use the upstream Cache-Control header as usual.

This change also ensures we don't add the immutable header for next dev.

Related to PR #24993

atcastle

This looks good to me. The static query parameter was added when static images were still getting served from the public folder. Now that they're being moved to _next/static/image this feels like the right way to go.

ijjk · 2021-06-08T21:39:27Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
buildDuration	11.1s	11.1s	⚠️ +9ms
buildDurationCached	2.7s	2.7s	-34ms
nodeModulesSize	46.5 MB	46.5 MB	-686 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.187	2.26	⚠️ +0.07
/ avg req/sec	1142.95	1106.11	⚠️ -36.84
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.168	1.143	-0.02
/error-in-render avg req/sec	2141.05	2187.46	+46.41

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
index.html gzip	573 B	573 B	✓
link.html gzip	580 B	580 B	✓
withRouter.html gzip	567 B	567 B	✓
Overall change	1.72 kB	1.72 kB	✓

Serverless Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
buildDuration	12.6s	12.4s	-261ms
buildDurationCached	3.6s	3.7s	⚠️ +84ms
nodeModulesSize	46.5 MB	46.5 MB	-686 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Serverless bundles Overall decrease ✓

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
_error.js	16.9 kB	16.9 kB	✓
404.html	2.44 kB	2.44 kB	✓
500.html	2.43 kB	2.43 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.63 kB	1.63 kB	✓
css.html	1.81 kB	1.81 kB	✓
hooks.html	1.69 kB	1.69 kB	✓
index.js	17.2 kB	17.2 kB	✓
link.js	17.4 kB	17.4 kB	-2 B
routerDirect.js	17.4 kB	17.4 kB	✓
withRouter.js	17.4 kB	17.4 kB	✓
Overall change	107 kB	107 kB	-2 B

Webpack 4 Mode (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
buildDuration	9.7s	9.8s	⚠️ +138ms
buildDurationCached	4.1s	4s	-68ms
nodeModulesSize	46.5 MB	46.5 MB	-686 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.229	2.259	⚠️ +0.03
/ avg req/sec	1121.74	1106.45	⚠️ -15.29
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.159	1.106	-0.05
/error-in-render avg req/sec	2157.12	2259.47	+102.35

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
677f882d2ed8..HASH.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.99 kB	7.99 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	61.1 kB	61.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
_app-HASH.js gzip	1.07 kB	1.07 kB	✓
_error-HASH.js gzip	3.74 kB	3.74 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	339 B	339 B	✓
hooks-HASH.js gzip	887 B	887 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.63 kB	1.63 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	9.17 kB	9.17 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
_buildManifest.js gzip	420 B	420 B	✓
Overall change	420 B	420 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js styfle/revise-static-header	Change
index.html gzip	625 B	625 B	✓
link.html gzip	632 B	632 B	✓
withRouter.html gzip	620 B	620 B	✓
Overall change	1.88 kB	1.88 kB	✓

Commit: e255974

This PR fixes a bug where the first request has the correct immutable header but subsequent requests do not. Depends on #25909

Previously we were accepting a `s=1` query string parameter for static imports, but this is not necessary. Instead, this PR looks at the file path to determine if the header should be `immutable`. The nice thing here is we don't need to worry about someone trying `s=1` with an external image or 3rd party loader. In that case, we use the upstream `Cache-Control` header as usual. This change also ensures we don't add the `immutable` header for `next dev`. Related to PR vercel#24993

This PR fixes a bug where the first request has the correct immutable header but subsequent requests do not. Depends on vercel#25909

Refactor image optimzer static immutable header

5dab044

styfle requested review from timneutkens, atcastle, jhoch and ijjk June 8, 2021 19:39

styfle requested review from divmain, lfades and shuding as code owners June 8, 2021 19:39

ijjk added the type: next label Jun 8, 2021

styfle changed the title ~~Refactor image optimzer static immutable header~~ Refactor image optimizer static immutable header Jun 8, 2021

This comment has been minimized.

Sign in to view

Remove unused tests

3860ea6

This comment has been minimized.

Sign in to view

atcastle approved these changes Jun 8, 2021

View reviewed changes

Merge branch 'canary' into styfle/revise-static-header

e255974

ijjk approved these changes Jun 8, 2021

View reviewed changes

styfle mentioned this pull request Jun 8, 2021

Fix immutable header on static image #25914

Merged

kodiakhq bot merged commit 7b77415 into canary Jun 8, 2021

kodiakhq bot deleted the styfle/revise-static-header branch June 8, 2021 22:05

kodiakhq bot pushed a commit that referenced this pull request Jun 8, 2021

Fix immutable header on static image (#25914)

a79eb4f

This PR fixes a bug where the first request has the correct immutable header but subsequent requests do not. Depends on #25909

ofhouse mentioned this pull request Jun 15, 2021

Enable support for static image imports milliHQ/terraform-aws-next-js-image-optimization#42

Closed

1 task

sync-by-unito bot mentioned this pull request Jun 16, 2021

chore(deps): bump next from 10.1.2 to 11.0.0 filecoin-project/slate#793

Closed

flybayer pushed a commit to blitz-js/next.js that referenced this pull request Jun 16, 2021

Fix immutable header on static image (vercel#25914)

e8e8996

This PR fixes a bug where the first request has the correct immutable header but subsequent requests do not. Depends on vercel#25909

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor image optimizer static immutable header #25909

Refactor image optimizer static immutable header #25909

styfle commented Jun 8, 2021 •

edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

atcastle left a comment

ijjk commented Jun 8, 2021

Refactor image optimizer static immutable header #25909

Refactor image optimizer static immutable header #25909

Conversation

styfle commented Jun 8, 2021 • edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

atcastle left a comment

Choose a reason for hiding this comment

ijjk commented Jun 8, 2021

Stats from current PR

styfle commented Jun 8, 2021 •

edited