feat: add experiment for sharpjs cpu flags #71733

styfle · 2024-10-23T16:19:10Z

This PR adds two experimental flags to configure sharpjs settings that may improve cpu for image optimization.

ijjk · 2024-10-23T16:22:21Z

Tests Passed

ijjk · 2024-10-23T16:26:47Z

Stats from current PR

Default Build

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js styfle/add-experiment-image-sharp	Change
buildDuration	17.8s	16.4s	N/A
buildDurationCached	15.6s	13.6s	N/A
nodeModulesSize	374 MB	374 MB	⚠️ +10.8 kB
nextStartRea..uration (ms)	435ms	430ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js styfle/add-experiment-image-sharp	Change
4172-HASH.js gzip	45 kB	45 kB	N/A
4265-HASH.js gzip	5.27 kB	5.26 kB	N/A
7ac8fc69-HASH.js gzip	52.6 kB	52.6 kB	N/A
9045.HASH.js gzip	169 B	169 B	✓
framework-HASH.js gzip	57.4 kB	57.4 kB	N/A
main-app-HASH.js gzip	229 B	232 B	N/A
main-HASH.js gzip	32.9 kB	32.9 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	✓
Overall change	1.88 kB	1.88 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js styfle/add-experiment-image-sharp	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-experiment-image-sharp	Change
_app-HASH.js gzip	192 B	192 B	✓
_error-HASH.js gzip	192 B	191 B	N/A
amp-HASH.js gzip	506 B	512 B	N/A
css-HASH.js gzip	343 B	342 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.85 kB	N/A
edge-ssr-HASH.js gzip	265 B	266 B	N/A
head-HASH.js gzip	364 B	364 B	✓
hooks-HASH.js gzip	392 B	392 B	✓
image-HASH.js gzip	4.41 kB	4.41 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.78 kB	2.78 kB	N/A
routerDirect..HASH.js gzip	327 B	327 B	✓
script-HASH.js gzip	397 B	396 B	N/A
withRouter-HASH.js gzip	321 B	324 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	1.65 kB	1.65 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js styfle/add-experiment-image-sharp	Change
_buildManifest.js gzip	751 B	749 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js styfle/add-experiment-image-sharp	Change
index.html gzip	522 B	523 B	N/A
link.html gzip	537 B	536 B	N/A
withRouter.html gzip	518 B	519 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js styfle/add-experiment-image-sharp	Change
edge-ssr.js gzip	128 kB	128 kB	N/A
page.js gzip	187 kB	187 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js styfle/add-experiment-image-sharp	Change
middleware-b..fest.js gzip	667 B	668 B	N/A
middleware-r..fest.js gzip	155 B	156 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-experiment-image-sharp	Change
973-experime...dev.js gzip	322 B	322 B	✓
973.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	317 kB	317 kB	✓
app-page-exp..prod.js gzip	121 kB	121 kB	✓
app-page-tur..prod.js gzip	134 kB	134 kB	✓
app-page-tur..prod.js gzip	129 kB	129 kB	✓
app-page.run...dev.js gzip	308 kB	308 kB	✓
app-page.run..prod.js gzip	117 kB	117 kB	✓
app-route-ex...dev.js gzip	35.9 kB	35.9 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.61 kB	9.61 kB	✓
pages-api.ru...dev.js gzip	11.4 kB	11.4 kB	✓
pages-api.ru..prod.js gzip	9.61 kB	9.61 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	58.4 kB	58.4 kB	✓
Overall change	1.46 MB	1.46 MB	✓

build cache

	vercel/next.js canary	vercel/next.js styfle/add-experiment-image-sharp	Change
0.pack gzip	1.85 MB	1.85 MB	N/A
index.pack gzip	144 kB	144 kB	N/A
Overall change	0 B	0 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([
   [8358],
   {
-    /***/ 4693: /***/ (
+    /***/ 7494: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(8698);
+          return __webpack_require__(9269);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 5928: /***/ (module, exports, __webpack_require__) => {
+    /***/ 245: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,17 +40,17 @@
         __webpack_require__(1150)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(2614)
+        __webpack_require__(6936)
       );
-      const _getimgprops = __webpack_require__(8958);
-      const _imageconfig = __webpack_require__(1533);
-      const _imageconfigcontextsharedruntime = __webpack_require__(2437);
-      const _warnonce = __webpack_require__(9124);
-      const _routercontextsharedruntime = __webpack_require__(5778);
+      const _getimgprops = __webpack_require__(1096);
+      const _imageconfig = __webpack_require__(8965);
+      const _imageconfigcontextsharedruntime = __webpack_require__(5280);
+      const _warnonce = __webpack_require__(857);
+      const _routercontextsharedruntime = __webpack_require__(9684);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(406)
+        __webpack_require__(2448)
       );
-      const _usemergedref = __webpack_require__(9782);
+      const _usemergedref = __webpack_require__(5493);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -371,7 +371,7 @@
       /***/
     },
 
-    /***/ 9782: /***/ (module, exports, __webpack_require__) => {
+    /***/ 5493: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -432,7 +432,7 @@
       /***/
     },
 
-    /***/ 8958: /***/ (
+    /***/ 1096: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -448,9 +448,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(9124);
-      const _imageblursvg = __webpack_require__(9846);
-      const _imageconfig = __webpack_require__(1533);
+      const _warnonce = __webpack_require__(857);
+      const _imageblursvg = __webpack_require__(5681);
+      const _imageconfig = __webpack_require__(8965);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -824,7 +824,7 @@
       /***/
     },
 
-    /***/ 9846: /***/ (__unused_webpack_module, exports) => {
+    /***/ 5681: /***/ (__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 @@
       /***/
     },
 
-    /***/ 4951: /***/ (
+    /***/ 7398: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -906,10 +906,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(9608);
-      const _getimgprops = __webpack_require__(8958);
-      const _imagecomponent = __webpack_require__(5928);
+      const _getimgprops = __webpack_require__(1096);
+      const _imagecomponent = __webpack_require__(245);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(406)
+        __webpack_require__(2448)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -941,7 +941,7 @@
       /***/
     },
 
-    /***/ 406: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2448: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -976,7 +976,7 @@
       /***/
     },
 
-    /***/ 8698: /***/ (
+    /***/ 9269: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -993,8 +993,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(1882);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-28668d39-20241023_re_wbsj4g46sbkzmyvf32u2ztx36m/node_modules/next/image.js
-      var next_image = __webpack_require__(477);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-28668d39-20241023_re_ygc4u4zbyids6gylg2elop7bza/node_modules/next/image.js
+      var next_image = __webpack_require__(8797);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -1024,12 +1024,12 @@
       /***/
     },
 
-    /***/ 477: /***/ (
+    /***/ 8797: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(4951);
+      module.exports = __webpack_require__(7398);
 
       /***/
     },
@@ -1039,7 +1039,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(4693)
+      __webpack_exec__(7494)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for main-HASH.js

Diff too large to display

Commit: 76864f1

packages/next/src/server/image-optimizer.ts

packages/next/src/server/config-shared.ts

feat: add experiment for sharp cpu flags

91ccf43

styfle requested a review from a team October 23, 2024 16:19

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

ztanner reviewed Oct 23, 2024

View reviewed changes

packages/next/src/server/image-optimizer.ts Outdated Show resolved Hide resolved

don't change the default

e3fa037

ztanner approved these changes Oct 23, 2024

View reviewed changes

switch from env to config, and add tests

242faf0

ijjk added the tests label Oct 23, 2024

ztanner reviewed Oct 23, 2024

View reviewed changes

packages/next/src/server/config-shared.ts Show resolved Hide resolved

fix test

76864f1

ztanner approved these changes Oct 23, 2024

View reviewed changes

ijjk approved these changes Oct 23, 2024

View reviewed changes

styfle merged commit 0dce6bb into canary Oct 24, 2024
103 of 107 checks passed

styfle deleted the styfle/add-experiment-image-sharp branch October 24, 2024 00:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add experiment for sharpjs cpu flags #71733

feat: add experiment for sharpjs cpu flags #71733

styfle commented Oct 23, 2024

ijjk commented Oct 23, 2024 •

edited

Loading

ijjk commented Oct 23, 2024 •

edited

Loading

feat: add experiment for sharpjs cpu flags #71733

feat: add experiment for sharpjs cpu flags #71733

Conversation

styfle commented Oct 23, 2024

ijjk commented Oct 23, 2024 • edited Loading

Tests Passed

ijjk commented Oct 23, 2024 • edited Loading

Stats from current PR

ijjk commented Oct 23, 2024 •

edited

Loading

ijjk commented Oct 23, 2024 •

edited

Loading