Improve next/image warnings to avoid printing more than once

[styfle]

Currently, we print warnings during next dev for every render of next/image, which can quickly fill the console making it really unfriendly to developers trying to read the logs.

This PR changes the behavior so that each unique warning prints at most once.

• Related to Too many next/image warning/s for non relative positioned parents #33007
• Related to Can I disable this specific warning? #31340

[ijjk]

Looks good

[ijjk]

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js warn-at-most-once-image	Change
buildDuration	16s	16s	-19ms
buildDurationCached	6.2s	6.2s	-51ms
nodeModulesSize	367 MB	367 MB	⚠️ +462 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js warn-at-most-once-image	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.038	3.06	⚠️ +0.02
/ avg req/sec	823	816.9	⚠️ -6.1
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.407	1.468	⚠️ +0.06
/error-in-render avg req/sec	1776.89	1702.84	⚠️ -74.05

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js warn-at-most-once-image	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	27.9 kB	27.9 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.6 kB	71.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js warn-at-most-once-image	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js warn-at-most-once-image	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	326 B	326 B	✓
dynamic-HASH.js gzip	2.57 kB	2.57 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	919 B	919 B	✓
image-HASH.js gzip	5.05 kB	5.05 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.26 kB	2.26 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.7 kB	14.7 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js warn-at-most-once-image	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js warn-at-most-once-image	Change
index.html gzip	532 B	532 B	✓
link.html gzip	544 B	544 B	✓
withRouter.html gzip	526 B	526 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-e46f7cf4e561503a.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-39f3ab40e378fe36.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-9af46ce04572b728.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-b932c7479a7c37ca.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -239,6 +239,10 @@
         "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
       if (false) {
       }
+      var warnOnce = function(_) {};
+      if (false) {
+        var warnings;
+      }
       var VALID_LOADING_VALUES = /* unused pure expression or super */ null && [
         "lazy",
         "eager",

---

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js warn-at-most-once-image	Change
buildDuration	19.7s	19.4s	-301ms
buildDurationCached	6.3s	6.2s	-40ms
nodeModulesSize	367 MB	367 MB	⚠️ +462 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js warn-at-most-once-image	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.13	3.052	-0.08
/ avg req/sec	798.74	819.22	+20.48
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.418	1.405	-0.01
/error-in-render avg req/sec	1763.34	1779.15	+15.81

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js warn-at-most-once-image	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.1 kB	42.1 kB	✓
main-HASH.js gzip	27.9 kB	27.9 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.7 kB	71.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js warn-at-most-once-image	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js warn-at-most-once-image	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.56 kB	2.56 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	911 B	911 B	✓
image-HASH.js gzip	5.08 kB	5.08 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.28 kB	2.28 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.7 kB	14.7 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js warn-at-most-once-image	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js warn-at-most-once-image	Change
index.html gzip	533 B	533 B	✓
link.html gzip	547 B	547 B	✓
withRouter.html gzip	527 B	527 B	✓
Overall change	1.61 kB	1.61 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-e46f7cf4e561503a.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-39f3ab40e378fe36.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-9af46ce04572b728.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-b932c7479a7c37ca.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -239,6 +239,10 @@
         "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
       if (false) {
       }
+      var warnOnce = function(_) {};
+      if (false) {
+        var warnings;
+      }
       var VALID_LOADING_VALUES = /* unused pure expression or super */ null && [
         "lazy",
         "eager",

Commit: f1829ec