feat: add experimental `imgOptSequentialRead` config #72411

styfle · 2024-11-06T15:50:52Z

This setting was originally added in PR #44881 and then removed in PR #65846 however it seems like it may still be useful in some cases.

The sharp docs are not very clear:

false to use random access, true to use sequential reads. Some operations will do this automatically.

Let's add it back as an experimental setting so we can measure performance.

ijjk · 2024-11-06T15:55:51Z

Failing test suites

Commit: 71731a5

pnpm test-start-turbo test/e2e/app-dir/dynamic-io/dynamic-io.node-crypto.test.ts (turbopack)

dynamic-io > should not prerender pages with uncached require('node:crypto').randomInt(max) calls

Expand output

● dynamic-io › should not prerender pages with uncached require('node:crypto').randomInt(max) calls

expect(received).not.toEqual(expected) // deep equality

Expected: not "81"

  164 |       expect($('#layout').text()).toBe('at runtime')
  165 |       expect($('#page').text()).toBe('at runtime')
> 166 |       expect($('#first').text()).not.toEqual($('#second').text())
      |                                      ^
  167 |     }
  168 |   })
  169 |

  at Object.toEqual (e2e/app-dir/dynamic-io/dynamic-io.node-crypto.test.ts:166:38)

Read more about building and testing Next.js in contributing.md.

ijjk · 2024-11-06T16:00:20Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js styfle/add-sequential-read-config	Change
buildDuration	21.3s	17.4s	N/A
buildDurationCached	16.6s	14.7s	N/A
nodeModulesSize	403 MB	403 MB	⚠️ +3.6 kB
nextStartRea..uration (ms)	478ms	477ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js styfle/add-sequential-read-config	Change
3073-HASH.js gzip	45.5 kB	45.5 kB	N/A
3898-HASH.js gzip	5.27 kB	5.27 kB	N/A
7183.HASH.js gzip	169 B	168 B	N/A
b5cfd723-HASH.js gzip	52.5 kB	52.5 kB	✓
framework-HASH.js gzip	57.3 kB	57.3 kB	N/A
main-app-HASH.js gzip	233 B	231 B	N/A
main-HASH.js gzip	33.2 kB	33.2 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	✓
Overall change	54.2 kB	54.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js styfle/add-sequential-read-config	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Overall change	39.4 kB	39.4 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js styfle/add-sequential-read-config	Change
_app-HASH.js gzip	193 B	194 B	N/A
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	513 B	511 B	N/A
css-HASH.js gzip	343 B	344 B	N/A
dynamic-HASH.js gzip	1.85 kB	1.84 kB	N/A
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	363 B	362 B	N/A
hooks-HASH.js gzip	392 B	393 B	N/A
image-HASH.js gzip	4.41 kB	4.4 kB	N/A
index-HASH.js gzip	268 B	266 B	N/A
link-HASH.js gzip	2.77 kB	2.78 kB	N/A
routerDirect..HASH.js gzip	327 B	325 B	N/A
script-HASH.js gzip	396 B	397 B	N/A
withRouter-HASH.js gzip	324 B	324 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	887 B	887 B	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js styfle/add-sequential-read-config	Change
_buildManifest.js gzip	748 B	748 B	✓
Overall change	748 B	748 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js styfle/add-sequential-read-config	Change
index.html gzip	524 B	523 B	N/A
link.html gzip	538 B	537 B	N/A
withRouter.html gzip	519 B	519 B	✓
Overall change	519 B	519 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js styfle/add-sequential-read-config	Change
edge-ssr.js gzip	128 kB	128 kB	N/A
page.js gzip	198 kB	198 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js styfle/add-sequential-read-config	Change
middleware-b..fest.js gzip	669 B	667 B	N/A
middleware-r..fest.js gzip	156 B	155 B	N/A
middleware.js gzip	31 kB	31 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	844 B	844 B	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js styfle/add-sequential-read-config	Change
196-experime...dev.js gzip	322 B	322 B	✓
196.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	319 kB	319 kB	✓
app-page-exp..prod.js gzip	123 kB	123 kB	✓
app-page-tur..prod.js gzip	136 kB	136 kB	✓
app-page-tur..prod.js gzip	131 kB	131 kB	✓
app-page.run...dev.js gzip	309 kB	309 kB	✓
app-page.run..prod.js gzip	119 kB	119 kB	✓
app-route-ex...dev.js gzip	36 kB	36 kB	✓
app-route-ex..prod.js gzip	24.4 kB	24.4 kB	✓
app-route-tu..prod.js gzip	24.4 kB	24.4 kB	✓
app-route-tu..prod.js gzip	24.2 kB	24.2 kB	✓
app-route.ru...dev.js gzip	37.6 kB	37.6 kB	✓
app-route.ru..prod.js gzip	24.2 kB	24.2 kB	✓
pages-api-tu..prod.js gzip	9.59 kB	9.59 kB	✓
pages-api.ru...dev.js gzip	11.4 kB	11.4 kB	✓
pages-api.ru..prod.js gzip	9.58 kB	9.58 kB	✓
pages-turbo...prod.js gzip	20.9 kB	20.9 kB	✓
pages.runtim...dev.js gzip	26.5 kB	26.5 kB	✓
pages.runtim..prod.js gzip	20.9 kB	20.9 kB	✓
server.runti..prod.js gzip	915 kB	915 kB	✓
Overall change	2.32 MB	2.32 MB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js styfle/add-sequential-read-config	Change
0.pack gzip	2.01 MB	2 MB	N/A
index.pack gzip	146 kB	147 kB	⚠️ +958 B
Overall change	146 kB	147 kB	⚠️ +958 B

Diff details

Diff for page.js

Diff too large to display

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([
   [2983],
   {
-    /***/ 8916: /***/ (
+    /***/ 7893: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(4209);
+          return __webpack_require__(3231);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 9265: /***/ (module, exports, __webpack_require__) => {
+    /***/ 4457: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,17 +40,17 @@
         __webpack_require__(9577)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1436)
+        __webpack_require__(5156)
       );
-      const _getimgprops = __webpack_require__(8517);
-      const _imageconfig = __webpack_require__(2168);
-      const _imageconfigcontextsharedruntime = __webpack_require__(9202);
-      const _warnonce = __webpack_require__(6992);
-      const _routercontextsharedruntime = __webpack_require__(8155);
+      const _getimgprops = __webpack_require__(637);
+      const _imageconfig = __webpack_require__(2720);
+      const _imageconfigcontextsharedruntime = __webpack_require__(8650);
+      const _warnonce = __webpack_require__(5752);
+      const _routercontextsharedruntime = __webpack_require__(5139);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(345)
+        __webpack_require__(2801)
       );
-      const _usemergedref = __webpack_require__(2806);
+      const _usemergedref = __webpack_require__(1985);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -371,7 +371,7 @@
       /***/
     },
 
-    /***/ 2806: /***/ (module, exports, __webpack_require__) => {
+    /***/ 1985: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -432,7 +432,7 @@
       /***/
     },
 
-    /***/ 8517: /***/ (
+    /***/ 637: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -448,9 +448,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(6992);
-      const _imageblursvg = __webpack_require__(1692);
-      const _imageconfig = __webpack_require__(2168);
+      const _warnonce = __webpack_require__(5752);
+      const _imageblursvg = __webpack_require__(1732);
+      const _imageconfig = __webpack_require__(2720);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -824,7 +824,7 @@
       /***/
     },
 
-    /***/ 1692: /***/ (__unused_webpack_module, exports) => {
+    /***/ 1732: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -879,7 +879,7 @@
       /***/
     },
 
-    /***/ 4673: /***/ (
+    /***/ 857: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -906,10 +906,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(1739);
-      const _getimgprops = __webpack_require__(8517);
-      const _imagecomponent = __webpack_require__(9265);
+      const _getimgprops = __webpack_require__(637);
+      const _imagecomponent = __webpack_require__(4457);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(345)
+        __webpack_require__(2801)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -941,7 +941,7 @@
       /***/
     },
 
-    /***/ 345: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2801: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -976,7 +976,7 @@
       /***/
     },
 
-    /***/ 4209: /***/ (
+    /***/ 3231: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -993,8 +993,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@19.0.0-rc-7c8e5e7a-20241101/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(7515);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-7c8e5e7a-20241101_re_ngsqfltlxii45umrwe6rktuauy/node_modules/next/image.js
-      var next_image = __webpack_require__(7265);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-7c8e5e7a-20241101_re_ay5jspqvpcpk5357qiimbatlya/node_modules/next/image.js
+      var next_image = __webpack_require__(3120);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -1024,12 +1024,12 @@
       /***/
     },
 
-    /***/ 7265: /***/ (
+    /***/ 3120: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(4673);
+      module.exports = __webpack_require__(857);
 
       /***/
     },
@@ -1039,7 +1039,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(8916)
+      __webpack_exec__(7893)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for main-HASH.js

Diff too large to display

Commit: 71731a5

This setting was originally added in PR vercel#44881 and then removed in PR vercel#65846 however it seems like it may still be useful in some cases. The [sharp docs](https://sharp.pixelplumbing.com/api-constructor) are not very clear: > false to use random access, true to use sequential reads. Some operations will do this automatically. Let's add it back as an experimental setting so we can measure performance.

feat: add experimental imgOptSequentialRead config

71731a5

ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Nov 6, 2024

styfle requested a review from a team November 6, 2024 15:52

eps1lon approved these changes Nov 6, 2024

View reviewed changes

ijjk approved these changes Nov 6, 2024

View reviewed changes

styfle enabled auto-merge (squash) November 6, 2024 16:17

styfle merged commit 1c219b1 into canary Nov 6, 2024
104 of 109 checks passed

styfle deleted the styfle/add-sequential-read-config branch November 6, 2024 16:20

github-actions bot added the locked label Nov 21, 2024

github-actions bot locked as resolved and limited conversation to collaborators Nov 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add experimental `imgOptSequentialRead` config #72411

feat: add experimental `imgOptSequentialRead` config #72411

styfle commented Nov 6, 2024 •

edited

Loading

ijjk commented Nov 6, 2024

ijjk commented Nov 6, 2024

feat: add experimental imgOptSequentialRead config #72411

feat: add experimental imgOptSequentialRead config #72411

Conversation

styfle commented Nov 6, 2024 • edited Loading

ijjk commented Nov 6, 2024

Failing test suites

ijjk commented Nov 6, 2024

Stats from current PR

feat: add experimental `imgOptSequentialRead` config #72411

feat: add experimental `imgOptSequentialRead` config #72411

styfle commented Nov 6, 2024 •

edited

Loading