Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(next/image): add support for decoding prop #70678

Merged
merged 1 commit into from
Oct 1, 2024
Merged

feat(next/image): add support for decoding prop #70678

merged 1 commit into from
Oct 1, 2024
+38 −2

Conversation

styfle
Copy link
Member

@styfle styfle commented Oct 1, 2024 •
edited
Loading

@styfle styfle requested a review from ijjk October 1, 2024 20:38
@ijjk ijjk added created-by: Next.js team PRs by the Next.js team. Documentation Related to Next.js' official documentation. tests type: next labels Oct 1, 2024
@styfle styfle mentioned this pull request Oct 1, 2024
Merged
@ijjk
Copy link
Member

ijjk commented Oct 1, 2024

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70298 Change
buildDuration 17.2s 15.2s N/A
buildDurationCached 8.8s 6.7s N/A
nodeModulesSize 200 MB 200 MB ⚠️ +108 B
nextStartRea..uration (ms) 407ms 417ms N/A
Client Bundles (main, webpack)
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70298 Change
1a9f679d-HASH.js gzip 53.7 kB 53.7 kB N/A
5428.HASH.js gzip 181 B 180 B N/A
6067-HASH.js gzip 5.05 kB 5.05 kB N/A
6428-HASH.js gzip 31.6 kB 31.6 kB N/A
framework-HASH.js gzip 44.9 kB 44.9 kB ✓
main-app-HASH.js gzip 242 B 244 B N/A
main-HASH.js gzip 32.3 kB 32.3 kB N/A
webpack-HASH.js gzip 1.68 kB 1.68 kB N/A
Overall change 44.9 kB 44.9 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70298 Change
polyfills-HASH.js gzip 39.4 kB 39.4 kB ✓
Overall change 39.4 kB 39.4 kB ✓
Client Pages
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70298 Change
_app-HASH.js gzip 196 B 196 B ✓
_error-HASH.js gzip 184 B 185 B N/A
amp-HASH.js gzip 502 B 504 B N/A
css-HASH.js gzip 321 B 324 B N/A
dynamic-HASH.js gzip 1.82 kB 1.82 kB N/A
edge-ssr-HASH.js gzip 258 B 257 B N/A
head-HASH.js gzip 352 B 352 B ✓
hooks-HASH.js gzip 371 B 372 B N/A
image-HASH.js gzip 4.22 kB 4.23 kB N/A
index-HASH.js gzip 259 B 257 B N/A
link-HASH.js gzip 2.67 kB 2.68 kB N/A
routerDirect..HASH.js gzip 316 B 314 B N/A
script-HASH.js gzip 385 B 386 B N/A
withRouter-HASH.js gzip 311 B 310 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B ✓
Overall change 654 B 654 B ✓
Client Build Manifests
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70298 Change
_buildManifest.js gzip 483 B 479 B N/A
Overall change 0 B 0 B ✓
Rendered Page Sizes
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70298 Change
index.html gzip 529 B 527 B N/A
link.html gzip 542 B 540 B N/A
withRouter.html gzip 524 B 524 B ✓
Overall change 524 B 524 B ✓
Edge SSR bundle Size
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70298 Change
edge-ssr.js gzip 95.4 kB 95.4 kB N/A
page.js gzip 3.06 kB 3.07 kB N/A
Overall change 0 B 0 B ✓
Middleware size
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70298 Change
middleware-b..fest.js gzip 659 B 655 B N/A
middleware-r..fest.js gzip 156 B 154 B N/A
middleware.js gzip 25.5 kB 25.5 kB N/A
edge-runtime..pack.js gzip 839 B 839 B ✓
Overall change 839 B 839 B ✓
Next Runtimes
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70298 Change
app-page-exp...dev.js gzip 171 kB 171 kB ✓
app-page-exp..prod.js gzip 98.2 kB 98.2 kB ✓
app-page-tur..prod.js gzip 99.9 kB 99.9 kB ✓
app-page-tur..prod.js gzip 94.2 kB 94.2 kB ✓
app-page.run...dev.js gzip 145 kB 145 kB ✓
app-page.run..prod.js gzip 92.7 kB 92.7 kB ✓
app-route-ex...dev.js gzip 22 kB 22 kB ✓
app-route-ex..prod.js gzip 15.5 kB 15.5 kB ✓
app-route-tu..prod.js gzip 15.5 kB 15.5 kB ✓
app-route-tu..prod.js gzip 15.2 kB 15.2 kB ✓
app-route.ru...dev.js gzip 21.7 kB 21.7 kB ✓
app-route.ru..prod.js gzip 15.2 kB 15.2 kB ✓
pages-api-tu..prod.js gzip 9.58 kB 9.58 kB ✓
pages-api.ru...dev.js gzip 9.85 kB 9.85 kB ✓
pages-api.ru..prod.js gzip 9.57 kB 9.57 kB ✓
pages-turbo...prod.js gzip 22.5 kB 22.5 kB ✓
pages.runtim...dev.js gzip 23.2 kB 23.2 kB ✓
pages.runtim..prod.js gzip 22.5 kB 22.5 kB ✓
server.runti..prod.js gzip 51.5 kB 51.5 kB ✓
Overall change 955 kB 955 kB ✓
build cache Overall increase ⚠️
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70298 Change
0.pack gzip 1.6 MB 1.6 MB ⚠️ +1.53 kB
index.pack gzip 114 kB 114 kB ⚠️ +104 B
Overall change 1.72 MB 1.72 MB ⚠️ +1.63 kB
Diff details
Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js 
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [8358],
   {
-    /***/ 7935: /***/ function (
+    /***/ 1058: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(445);
+          return __webpack_require__(4816);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 3739: /***/ function (module, exports, __webpack_require__) {
+    /***/ 6447: /***/ function (module, exports, __webpack_require__) {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,15 +40,15 @@
         __webpack_require__(967)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(9170)
+        __webpack_require__(7945)
       );
-      const _getimgprops = __webpack_require__(2629);
-      const _imageconfig = __webpack_require__(4766);
-      const _imageconfigcontextsharedruntime = __webpack_require__(5390);
-      const _warnonce = __webpack_require__(359);
-      const _routercontextsharedruntime = __webpack_require__(368);
+      const _getimgprops = __webpack_require__(1530);
+      const _imageconfig = __webpack_require__(2940);
+      const _imageconfigcontextsharedruntime = __webpack_require__(4797);
+      const _warnonce = __webpack_require__(2185);
+      const _routercontextsharedruntime = __webpack_require__(5745);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(5962)
+        __webpack_require__(6604)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -376,7 +376,7 @@
       /***/
     },
 
-    /***/ 2629: /***/ function (
+    /***/ 1530: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -392,9 +392,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(359);
-      const _imageblursvg = __webpack_require__(3022);
-      const _imageconfig = __webpack_require__(4766);
+      const _warnonce = __webpack_require__(2185);
+      const _imageblursvg = __webpack_require__(2706);
+      const _imageconfig = __webpack_require__(2940);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -535,6 +535,7 @@
           placeholder = "empty",
           blurDataURL,
           fetchPriority,
+          decoding = "async",
           layout,
           objectFit,
           objectPosition,
@@ -744,7 +745,7 @@
           fetchPriority,
           width: widthInt,
           height: heightInt,
-          decoding: "async",
+          decoding,
           className,
           style: {
             ...imgStyle,
@@ -769,7 +770,7 @@
       /***/
     },
 
-    /***/ 3022: /***/ function (__unused_webpack_module, exports) {
+    /***/ 2706: /***/ function (__unused_webpack_module, exports) {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -824,7 +825,7 @@
       /***/
     },
 
-    /***/ 3943: /***/ function (
+    /***/ 2373: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -851,10 +852,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(2430);
-      const _getimgprops = __webpack_require__(2629);
-      const _imagecomponent = __webpack_require__(3739);
+      const _getimgprops = __webpack_require__(1530);
+      const _imagecomponent = __webpack_require__(6447);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(5962)
+        __webpack_require__(6604)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -886,7 +887,7 @@
       /***/
     },
 
-    /***/ 5962: /***/ function (__unused_webpack_module, exports) {
+    /***/ 6604: /***/ function (__unused_webpack_module, exports) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -921,7 +922,7 @@
       /***/
     },
 
-    /***/ 445: /***/ function (
+    /***/ 4816: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -942,8 +943,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(2676);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@18.3.1_react@18.3.1/node_modules/next/image.js
-      var next_image = __webpack_require__(4841);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@18.3.1_react@18.3.1/node_modules/next/image.js
+      var next_image = __webpack_require__(7053);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ var nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -973,12 +974,12 @@
       /***/
     },
 
-    /***/ 4841: /***/ function (
+    /***/ 7053: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(3943);
+      module.exports = __webpack_require__(2373);
 
       /***/
     },
@@ -989,7 +990,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [2888, 9774, 179], function () {
-      return __webpack_exec__(7935);
+      return __webpack_exec__(1058);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for 6067-HASH.js 
@@ -1,8 +1,8 @@
 "use strict";
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
-  [6067],
+  [3918],
   {
-    /***/ 6067: /***/ function (module, exports, __webpack_require__) {
+    /***/ 3918: /***/ function (module, exports, __webpack_require__) {
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
         value: true,
@@ -13,25 +13,25 @@
           return Image;
         },
       });
-      const _interop_require_default = __webpack_require__(6924);
-      const _interop_require_wildcard = __webpack_require__(6958);
-      const _jsxruntime = __webpack_require__(7059);
+      const _interop_require_default = __webpack_require__(9216);
+      const _interop_require_wildcard = __webpack_require__(6035);
+      const _jsxruntime = __webpack_require__(8588);
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
-        __webpack_require__(6307)
+        __webpack_require__(8230)
       );
       const _reactdom = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(4430)
+        __webpack_require__(4690)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8006)
+        __webpack_require__(4651)
       );
-      const _getimgprops = __webpack_require__(8429);
-      const _imageconfig = __webpack_require__(7669);
-      const _imageconfigcontextsharedruntime = __webpack_require__(7134);
-      const _warnonce = __webpack_require__(6411);
-      const _routercontextsharedruntime = __webpack_require__(8077);
+      const _getimgprops = __webpack_require__(3430);
+      const _imageconfig = __webpack_require__(8103);
+      const _imageconfigcontextsharedruntime = __webpack_require__(7187);
+      const _warnonce = __webpack_require__(3914);
+      const _routercontextsharedruntime = __webpack_require__(4538);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(995)
+        __webpack_require__(7956)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -360,7 +360,7 @@
       /***/
     },
 
-    /***/ 9496: /***/ function (
+    /***/ 40: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -374,9 +374,9 @@
           return AmpStateContext;
         },
       });
-      const _interop_require_default = __webpack_require__(6924);
+      const _interop_require_default = __webpack_require__(9216);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6307)
+        __webpack_require__(8230)
       );
       const AmpStateContext = _react.default.createContext({});
       if (false) {
@@ -385,7 +385,7 @@
       /***/
     },
 
-    /***/ 8634: /***/ function (__unused_webpack_module, exports) {
+    /***/ 1555: /***/ function (__unused_webpack_module, exports) {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -407,7 +407,7 @@
       /***/
     },
 
-    /***/ 8429: /***/ function (
+    /***/ 3430: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -421,9 +421,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(6411);
-      const _imageblursvg = __webpack_require__(1960);
-      const _imageconfig = __webpack_require__(7669);
+      const _warnonce = __webpack_require__(3914);
+      const _imageblursvg = __webpack_require__(333);
+      const _imageconfig = __webpack_require__(8103);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -564,6 +564,7 @@
           placeholder = "empty",
           blurDataURL,
           fetchPriority,
+          decoding = "async",
           layout,
           objectFit,
           objectPosition,
@@ -773,7 +774,7 @@
           fetchPriority,
           width: widthInt,
           height: heightInt,
-          decoding: "async",
+          decoding,
           className,
           style: {
             ...imgStyle,
@@ -798,7 +799,7 @@
       /***/
     },
 
-    /***/ 8006: /***/ function (module, exports, __webpack_require__) {
+    /***/ 4651: /***/ function (module, exports, __webpack_require__) {
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
         value: true,
@@ -819,19 +820,19 @@
           return defaultHead;
         },
       });
-      const _interop_require_default = __webpack_require__(6924);
-      const _interop_require_wildcard = __webpack_require__(6958);
-      const _jsxruntime = __webpack_require__(7059);
+      const _interop_require_default = __webpack_require__(9216);
+      const _interop_require_wildcard = __webpack_require__(6035);
+      const _jsxruntime = __webpack_require__(8588);
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
-        __webpack_require__(6307)
+        __webpack_require__(8230)
       );
       const _sideeffect = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(4795)
+        __webpack_require__(9576)
       );
-      const _ampcontextsharedruntime = __webpack_require__(9496);
-      const _headmanagercontextsharedruntime = __webpack_require__(5630);
-      const _ampmode = __webpack_require__(8634);
-      const _warnonce = __webpack_require__(6411);
+      const _ampcontextsharedruntime = __webpack_require__(40);
+      const _headmanagercontextsharedruntime = __webpack_require__(3958);
+      const _ampmode = __webpack_require__(1555);
+      const _warnonce = __webpack_require__(3914);
       function defaultHead(inAmpMode) {
         if (inAmpMode === void 0) inAmpMode = false;
         const head = [
@@ -1007,7 +1008,7 @@
       /***/
     },
 
-    /***/ 1960: /***/ function (__unused_webpack_module, exports) {
+    /***/ 333: /***/ function (__unused_webpack_module, exports) {
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
        */
@@ -1061,7 +1062,7 @@
       /***/
     },
 
-    /***/ 7134: /***/ function (
+    /***/ 7187: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1075,11 +1076,11 @@
           return ImageConfigContext;
         },
       });
-      const _interop_require_default = __webpack_require__(6924);
+      const _interop_require_default = __webpack_require__(9216);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6307)
+        __webpack_require__(8230)
       );
-      const _imageconfig = __webpack_require__(7669);
+      const _imageconfig = __webpack_require__(8103);
       const ImageConfigContext = _react.default.createContext(
         _imageconfig.imageConfigDefault
       );
@@ -1089,7 +1090,7 @@
       /***/
     },
 
-    /***/ 7669: /***/ function (__unused_webpack_module, exports) {
+    /***/ 8103: /***/ function (__unused_webpack_module, exports) {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -1136,7 +1137,7 @@
       /***/
     },
 
-    /***/ 995: /***/ function (__unused_webpack_module, exports) {
+    /***/ 7956: /***/ function (__unused_webpack_module, exports) {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -1169,7 +1170,7 @@
       /***/
     },
 
-    /***/ 8077: /***/ function (
+    /***/ 4538: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1183,9 +1184,9 @@
           return RouterContext;
         },
       });
-      const _interop_require_default = __webpack_require__(6924);
+      const _interop_require_default = __webpack_require__(9216);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6307)
+        __webpack_require__(8230)
       );
       const RouterContext = _react.default.createContext(null);
       if (false) {
@@ -1194,7 +1195,7 @@
       /***/
     },
 
-    /***/ 4795: /***/ function (
+    /***/ 9576: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1208,7 +1209,7 @@
           return SideEffect;
         },
       });
-      const _react = __webpack_require__(6307);
+      const _react = __webpack_require__(8230);
       const isServer = typeof window === "undefined";
       const useClientOnlyLayoutEffect = isServer
         ? () => {}
Commit: 4b9da66

@styfle styfle merged commit 381d1f9 into 14-2-1 Oct 1, 2024
52 of 57 checks passed
@styfle styfle deleted the styfle/backport-pr-70298 branch October 1, 2024 21:15
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 16, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@ijjk ijjk ijjk approved these changes

Assignees
No one assigned
Labels
created-by: Next.js team PRs by the Next.js team. Documentation Related to Next.js' official documentation. locked tests type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@styfle @ijjk