Remove feature flags for static image and blurry placeholder #25797

atcastle · 2021-06-04T21:57:23Z

This PR removes the feature flag for blurry placeholder on the image component. The feature is op-in (by setting a placeholder property on an image component) so the chance of breaking something is minimal.

This PR also removes the experimental flag for static image processing, and replaces with a (default "false") flag in the images section of next.config.js. In other words, static image imports will be on by default, but can be turned off if it conflict's with a library that someone is already using.

This reverts commit 29892e3.

This reverts commit ccefcb2.

ijjk · 2021-06-07T12:42:03Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	atcastle/next.js remove-image-flags	Change
buildDuration	12.7s	12.8s	⚠️ +160ms
buildDurationCached	3.2s	3.1s	-65ms
nodeModulesSize	46.7 MB	46.7 MB	-593 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	atcastle/next.js remove-image-flags	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.621	2.525	-0.1
/ avg req/sec	953.99	990.27	+36.28
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.325	1.293	-0.03
/error-in-render avg req/sec	1887.43	1932.77	+45.34

Client Bundles (main, webpack, commons)

	vercel/next.js canary	atcastle/next.js remove-image-flags	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	atcastle/next.js remove-image-flags	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	atcastle/next.js remove-image-flags	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 Overall decrease ✓

	vercel/next.js canary	atcastle/next.js remove-image-flags	Change
_buildManifest.js gzip	392 B	391 B	-1 B
Overall change	392 B	391 B	-1 B

Rendered Page Sizes

	vercel/next.js canary	atcastle/next.js remove-image-flags	Change
index.html gzip	571 B	571 B	✓
link.html gzip	579 B	579 B	✓
withRouter.html gzip	567 B	567 B	✓
Overall change	1.72 kB	1.72 kB	✓

Diffs

Diff for _buildManifest.js

@@ -7,7 +7,7 @@ self.__BUILD_MANIFEST = {
   "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-7f1c918feab47667356f.js"],
   "/css": [
     "static\u002Fcss\u002F59de118426c393f58653.css",
-    "static\u002Fchunks\u002Fpages\u002Fcss-30f56ff29e8ee4ef81a9.js"
+    "static\u002Fchunks\u002Fpages\u002Fcss-184c47d2cd96affa4c34.js"
   ],
   "/hooks": [
     "static\u002Fchunks\u002Fpages\u002Fhooks-1a097873c02b793e8683.js"

Diff for css-HASH.js

@@ -15,7 +15,7 @@
         react__WEBPACK_IMPORTED_MODULE_0__
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        9662
+        5964
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         _css_module_css__WEBPACK_IMPORTED_MODULE_1__
@@ -54,7 +54,7 @@
       /***/
     },
 
-    /***/ 9662: /***/ function(module) {
+    /***/ 5964: /***/ function(module) {
       // extracted by mini-css-extract-plugin
       module.exports = { helloWorld: "css_helloWorld__2Fhmt" };

Serverless Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	atcastle/next.js remove-image-flags	Change
buildDuration	15s	14.4s	-620ms
buildDurationCached	4.3s	4.2s	-61ms
nodeModulesSize	46.7 MB	46.7 MB	-593 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	atcastle/next.js remove-image-flags	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	atcastle/next.js remove-image-flags	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	atcastle/next.js remove-image-flags	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 Overall decrease ✓

	vercel/next.js canary	atcastle/next.js remove-image-flags	Change
_buildManifest.js gzip	392 B	391 B	-1 B
Overall change	392 B	391 B	-1 B

Serverless bundles

	vercel/next.js canary	atcastle/next.js remove-image-flags	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	✓
routerDirect.js	17.4 kB	17.4 kB	✓
withRouter.js	17.4 kB	17.4 kB	✓
Overall change	107 kB	107 kB	✓

Webpack 4 Mode (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	atcastle/next.js remove-image-flags	Change
buildDuration	11.3s	11.4s	⚠️ +90ms
buildDurationCached	4.7s	4.5s	-225ms
nodeModulesSize	46.7 MB	46.7 MB	-593 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	atcastle/next.js remove-image-flags	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.587	2.583	0
/ avg req/sec	966.3	968.04	+1.74
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.326	1.312	-0.01
/error-in-render avg req/sec	1885.33	1905.54	+20.21

Client Bundles (main, webpack, commons)

	vercel/next.js canary	atcastle/next.js remove-image-flags	Change
677f882d2ed8..HASH.js gzip	13.3 kB	13.3 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	atcastle/next.js remove-image-flags	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	atcastle/next.js remove-image-flags	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.16 kB	9.16 kB	✓

Client Build Manifests

	vercel/next.js canary	atcastle/next.js remove-image-flags	Change
_buildManifest.js gzip	420 B	420 B	✓
Overall change	420 B	420 B	✓

Rendered Page Sizes

	vercel/next.js canary	atcastle/next.js remove-image-flags	Change
index.html gzip	626 B	626 B	✓
link.html gzip	632 B	632 B	✓
withRouter.html gzip	620 B	620 B	✓
Overall change	1.88 kB	1.88 kB	✓

Commit: 2e3c7b7

gu-stav · 2021-06-10T07:00:14Z

@atcastle Could #25950 be related to this change?

…25797) Co-authored-by: Steven <steven@ceriously.com> Co-authored-by: Tim Neutkens <timneutkens@me.com> Co-authored-by: Tim Neutkens <tim@timneutkens.nl> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

atcastle added 30 commits May 10, 2021 16:35

Add static image loading functionality with auto height and width

996dc7f

Add tests for static image fill layout

6dea6a2

Update testing for height and width

21400ba

Send cache-control immutable header for static assets

c6ad7c5

Add tests for static image cache control behavior

b5f2c12

Add test for build breaking on bad image path

bc5c64a

Move static image tests into default test suite and add format test

aa9e4fd

Put static image behind experimental flag

9b4c513

Fix support for images loaded with Require

fdd27c4

Remove extraneous code from next-image-loader

7c138de

Initial addition of new loader for converting new URL() usage

ccefcb2

Change static query parameter value from true to 1

acd4ae3

Update tests for static query param

5a8ce4c

Support new URL constructor for image component

29892e3

Revert "Support new URL constructor for image component"

108aed9

This reverts commit 29892e3.

Revert "Initial addition of new loader for converting new URL() usage"

b6a199a

This reverts commit ccefcb2.

Merge branch 'canary' of github.com:vercel/next.js into static-image

d4149d2

Integrate static image and blurry placeholder

809d86e

Return from image loader after emitting error

2e183bd

Support additional file types for image loader

85d3d06

standardize variable names for isStatic image

f937233

rename staticImages experimental config to enableStaticImages

9659f46

Only set height and width for static images if they're not provided

c65e416

Refactor static image argument detection to use type guards

357523a

Fix static image test label

0ed6844

Remove unneccessary lines from next-image-loader

6b8f5fb

In image-loader, shrink images based on largest dimension

a23b5f0

Rename dataURI to placeholder in image loader

6cb22b8

Exclude URL dependencies from using image loader

88d28f2

Allow image's to be imported from locations other than /public

cb63fbb

atcastle added 4 commits June 3, 2021 10:36

Run prettier on image-optimizer.ts

cfe7b38

Merge remote-tracking branch 'origin' into static-image

b538526

Switch static image feature flag to be default on

767c97e

Remove blurry placeholder experimental flag

3128dcd

atcastle requested review from divmain, ijjk, lfades, shuding and timneutkens as code owners June 4, 2021 21:57

ijjk added the type: next label Jun 4, 2021

This comment has been minimized.

Sign in to view

matamatanot mentioned this pull request Jun 5, 2021

Fix types for static image #25808

Merged

1 task

timneutkens previously approved these changes Jun 7, 2021

View reviewed changes

Only enable static images with webpack 5 enabled

c6d73db

timneutkens dismissed their stale review via c6d73db June 7, 2021 10:35

Merge branch 'canary' into remove-image-flags

3c2a996

timneutkens previously approved these changes Jun 7, 2021

View reviewed changes

This comment has been minimized.

Sign in to view

Add exclude for css regex

d054b2d

timneutkens dismissed their stale review via d054b2d June 7, 2021 12:00

This comment has been minimized.

Sign in to view

timneutkens approved these changes Jun 7, 2021

View reviewed changes

Merge branch 'canary' into remove-image-flags

2e3c7b7

timneutkens merged commit 62a4de9 into vercel:canary Jun 7, 2021

gu-stav mentioned this pull request Jun 11, 2021

Webpack: @svgr/webpack broken since 10.2.4-canary.5 #25950

Closed

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

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

Remove feature flags for static image and blurry placeholder #25797

Remove feature flags for static image and blurry placeholder #25797

atcastle commented Jun 4, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Jun 7, 2021

Diffs

gu-stav commented Jun 10, 2021

Remove feature flags for static image and blurry placeholder #25797

Remove feature flags for static image and blurry placeholder #25797

Conversation

atcastle commented Jun 4, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Jun 7, 2021

Stats from current PR

Diffs

gu-stav commented Jun 10, 2021