Add data-nimg attribute to image component

[atcastle]

This PR adds a single data attribute to the image element generated by the image component data-nimg) which just serves to signal that this image element is from the component. Currently it's hard to quickly/programmatically determine with certainty whether an image is from the component or not, so this change should make it easier for us to diagnose and improve performance issues related to the image component.

[ijjk]

Failing test suites

Commit: ff6402d

export dtest/integration/prerender/test/index.test.js

• SSG Prerender > serverless mode > should reload page on failed data request, and retry

Expand output

● SSG Prerender › serverless mode › should reload page on failed data request, and retry

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"#params"}
  (Session info: headless chrome=92.0.4515.131)

  701 |       ).toBe(true)
  702 |
> 703 |       const text = await browser.elementByCss('#params').text()
      |                    ^
  704 |       expect(text).toMatch(/post.*?post-999/)
  705 |     })
  706 |   }

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at Object.<anonymous> (integration/prerender/test/index.test.js:703:20)

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	atcastle/next.js add-img-data-attr	Change
buildDuration	12.8s	12.6s	-118ms
buildDurationCached	2.9s	2.9s	-58ms
nodeModulesSize	49.1 MB	49.1 MB	⚠️ +140 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	atcastle/next.js add-img-data-attr	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.286	2.306	⚠️ +0.02
/ avg req/sec	1093.58	1084.17	⚠️ -9.41
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.279	1.261	-0.02
/error-in-render avg req/sec	1954.65	1982.25	+27.6

Client Bundles (main, webpack, commons)

	vercel/next.js canary	atcastle/next.js add-img-data-attr	Change
745.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	23.1 kB	23.1 kB	✓
webpack-HASH.js gzip	1.5 kB	1.5 kB	✓
Overall change	67 kB	67 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	atcastle/next.js add-img-data-attr	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	atcastle/next.js add-img-data-attr	Change
_app-HASH.js gzip	980 B	980 B	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	329 B	329 B	✓
dynamic-HASH.js gzip	2.52 kB	2.52 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	904 B	904 B	✓
image-HASH.js gzip	4.12 kB	4.13 kB	⚠️ +7 B
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	319 B	319 B	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	12.8 kB	12.8 kB	⚠️ +7 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	atcastle/next.js add-img-data-attr	Change
_buildManifest.js gzip	490 B	491 B	⚠️ +1 B
Overall change	490 B	491 B	⚠️ +1 B

Rendered Page Sizes

	vercel/next.js canary	atcastle/next.js add-img-data-attr	Change
index.html gzip	531 B	531 B	✓
link.html gzip	544 B	544 B	✓
withRouter.html gzip	523 B	523 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for _buildManifest.js

@@ -17,7 +17,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fhooks-1cb3a46057c08067a973.js"
   ],
   "/image": [
-    "static\u002Fchunks\u002Fpages\u002Fimage-ffe48e73c00abc6054aa.js"
+    "static\u002Fchunks\u002Fpages\u002Fimage-1ce152c3d441f6919a04.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-7a3c1e637e71f2a0e489.js"],
   "/routerDirect": [

Diff for image-HASH.js

@@ -655,6 +655,7 @@
                   }),
                   {
                     decoding: "async",
+                    "data-nimg": true,
                     style: imgStyle,
                     className: className
                   }
@@ -665,6 +666,7 @@
             "img",
             Object.assign({}, rest, imgAttributes, {
               decoding: "async",
+              "data-nimg": true,
               className: className,
               ref: function ref(img) {
                 setRef(img);
@@ -692,9 +694,9 @@
                   rel: "preload",
                   as: "image",
                   href: imgAttributes.srcSet ? undefined : imgAttributes.src,
-                  // @ts-ignore: imagesrcset is not yet in the link element type
+                  // @ts-ignore: imagesrcset is not yet in the link element type.
                   imagesrcset: imgAttributes.srcSet,
-                  // @ts-ignore: imagesizes is not yet in the link element type
+                  // @ts-ignore: imagesizes is not yet in the link element type.
                   imagesizes: imgAttributes.sizes
                 })
               )

---

Webpack 4 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	atcastle/next.js add-img-data-attr	Change
buildDuration	10.6s	10.6s	-24ms
buildDurationCached	4.1s	4.1s	-44ms
nodeModulesSize	49.1 MB	49.1 MB	⚠️ +140 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	atcastle/next.js add-img-data-attr	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.316	2.317	0
/ avg req/sec	1079.55	1078.96	⚠️ -0.59
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.307	1.31	0
/error-in-render avg req/sec	1912.89	1908.84	⚠️ -4.05

Client Bundles (main, webpack, commons)

	vercel/next.js canary	atcastle/next.js add-img-data-attr	Change
17.HASH.js gzip	185 B	185 B	✓
677f882d2ed8..HASH.js gzip	14 kB	14 kB	✓
framework.HASH.js gzip	41.9 kB	41.9 kB	✓
main-HASH.js gzip	10.6 kB	10.6 kB	✓
webpack-HASH.js gzip	1.19 kB	1.19 kB	✓
Overall change	67.9 kB	67.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	atcastle/next.js add-img-data-attr	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 add-img-data-attr	Change
_app-HASH.js gzip	965 B	965 B	✓
_error-HASH.js gzip	3.71 kB	3.71 kB	✓
amp-HASH.js gzip	552 B	552 B	✓
css-HASH.js gzip	333 B	333 B	✓
dynamic-HASH.js gzip	2.71 kB	2.71 kB	✓
head-HASH.js gzip	2.97 kB	2.97 kB	✓
hooks-HASH.js gzip	911 B	911 B	✓
index-HASH.js gzip	231 B	231 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	298 B	298 B	✓
script-HASH.js gzip	2.95 kB	2.95 kB	✓
withRouter-HASH.js gzip	294 B	294 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	17.7 kB	17.7 kB	✓

Client Build Manifests

	vercel/next.js canary	atcastle/next.js add-img-data-attr	Change
_buildManifest.js gzip	498 B	498 B	✓
Overall change	498 B	498 B	✓

Rendered Page Sizes

	vercel/next.js canary	atcastle/next.js add-img-data-attr	Change
index.html gzip	577 B	577 B	✓
link.html gzip	589 B	589 B	✓
withRouter.html gzip	570 B	570 B	✓
Overall change	1.74 kB	1.74 kB	✓

Commit: 40a83c4