Stats from current release

ijjk · 2022-01-25T17:57:43Z

Stats from current release

Default Build (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary v12.0.8	vercel/next.js refs/heads/canary	Change
buildDuration	14.5s	12.6s	-2s
buildDurationCached	3.2s	3.2s	⚠️ +19ms
nodeModulesSize	359 MB	356 MB	-2.93 MB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary v12.0.8	vercel/next.js refs/heads/canary	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.897	2.934	⚠️ +0.04
/ avg req/sec	862.94	852.21	⚠️ -10.73
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.347	1.378	⚠️ +0.03
/error-in-render avg req/sec	1856.27	1814.6	⚠️ -41.67

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary v12.0.8	vercel/next.js refs/heads/canary	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	27.2 kB	27.2 kB	⚠️ +17 B
webpack-HASH.js gzip	1.45 kB	1.44 kB	-1 B
Overall change	71 kB	71 kB	⚠️ +16 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary v12.0.8	vercel/next.js refs/heads/canary	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary v12.0.8	vercel/next.js refs/heads/canary	Change
_app-HASH.js gzip	1.37 kB	1.37 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.37 kB	2.37 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	919 B	919 B	✓
image-HASH.js gzip	4.74 kB	4.94 kB	⚠️ +207 B
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.13 kB	2.19 kB	⚠️ +51 B
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.1 kB	14.4 kB	⚠️ +258 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary v12.0.8	vercel/next.js refs/heads/canary	Change
_buildManifest.js gzip	459 B	460 B	⚠️ +1 B
Overall change	459 B	460 B	⚠️ +1 B

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary v12.0.8	vercel/next.js refs/heads/canary	Change
index.html gzip	532 B	531 B	-1 B
link.html gzip	546 B	545 B	-1 B
withRouter.html gzip	527 B	526 B	-1 B
Overall change	1.6 kB	1.6 kB	-3 B

Diffs

Diff for _buildManifest.js

@@ -12,8 +12,8 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-538d621a0e670391.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-3cbae1287e809392.js"],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-1339957a75cc3c85.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-b1f110951983876f.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-f0a2c3bb0706d8b2.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"
   ],

Diff for image-HASH.js

@@ -127,9 +127,8 @@
         value: true
       };
       exports["default"] = Image;
-      var _react = _interopRequireDefault(__webpack_require__(7294));
+      var _react = _interopRequireWildcard(__webpack_require__(7294));
       var _head = _interopRequireDefault(__webpack_require__(5443));
-      var _toBase64 = __webpack_require__(6978);
       var _imageConfig = __webpack_require__(5809);
       var _useIntersection = __webpack_require__(7190);
       function _defineProperty1(obj, key, value) {
@@ -152,6 +151,30 @@
               default: obj
             };
       }
+      function _interopRequireWildcard(obj) {
+        if (obj && obj.__esModule) {
+          return obj;
+        } else {
+          var newObj = {};
+          if (obj != null) {
+            for (var key in obj) {
+              if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                var desc =
+                  Object.defineProperty && Object.getOwnPropertyDescriptor
+                    ? Object.getOwnPropertyDescriptor(obj, key)
+                    : {};
+                if (desc.get || desc.set) {
+                  Object.defineProperty(newObj, key, desc);
+                } else {
+                  newObj[key] = obj[key];
+                }
+              }
+            }
+          }
+          newObj.default = obj;
+          return newObj;
+        }
+      }
       function _objectSpread(target) {
         var _arguments = arguments,
           _loop = function(i) {
@@ -202,7 +225,6 @@
         }
         return target;
       }
-      var loadedImageURLs = new Set();
       var allImgs = new Map();
       var perfObserver;
       var emptyDataURL =
@@ -399,27 +421,36 @@
       }
       // See https://stackoverflow.com/q/39777833/266535 for why we use this ref
       // handler instead of the img's onLoad attribute.
-      function handleLoading(img, src, layout, placeholder, onLoadingComplete) {
-        if (!img) {
-          return;
-        }
+      function handleLoading(
+        imgRef,
+        src,
+        layout,
+        placeholder,
+        onLoadingCompleteRef
+      ) {
         var handleLoad = function() {
+          var img = imgRef.current;
+          if (!img) {
+            return;
+          }
           if (img.src !== emptyDataURL) {
             var p = "decode" in img ? img.decode() : Promise.resolve();
             p.catch(function() {}).then(function() {
+              if (!imgRef.current) {
+                return;
+              }
               if (placeholder === "blur") {
                 img.style.filter = "";
                 img.style.backgroundSize = "";
                 img.style.backgroundImage = "";
                 img.style.backgroundPosition = "";
               }
-              loadedImageURLs.add(src);
-              if (onLoadingComplete) {
+              if (onLoadingCompleteRef.current) {
                 var naturalWidth = img.naturalWidth,
                   naturalHeight = img.naturalHeight;
                 // Pass back read-only primitive values but not the
                 // underlying DOM element because it could be misused.
-                onLoadingComplete({
+                onLoadingCompleteRef.current({
                   naturalWidth: naturalWidth,
                   naturalHeight: naturalHeight
                 });
@@ -430,13 +461,15 @@
             });
           }
         };
-        if (img.complete) {
-          // If the real image fails to load, this will still remove the placeholder.
-          // This is the desired behavior for now, and will be revisited when error
-          // handling is worked on for the image component itself.
-          handleLoad();
-        } else {
-          img.onload = handleLoad;
+        if (imgRef.current) {
+          if (imgRef.current.complete) {
+            // If the real image fails to load, this will still remove the placeholder.
+            // This is the desired behavior for now, and will be revisited when error
+            // handling is worked on for the image component itself.
+            handleLoad();
+          } else {
+            imgRef.current.onload = handleLoad;
+          }
         }
       }
       function Image(_param) {
@@ -447,6 +480,8 @@
           _priority = _param.priority,
           priority = _priority === void 0 ? false : _priority,
           loading = _param.loading,
+          _lazyRoot = _param.lazyRoot,
+          lazyRoot = _lazyRoot === void 0 ? null : _lazyRoot,
           _lazyBoundary = _param.lazyBoundary,
           lazyBoundary = _lazyBoundary === void 0 ? "200px" : _lazyBoundary,
           className = _param.className,
@@ -467,6 +502,7 @@
             "unoptimized",
             "priority",
             "loading",
+            "lazyRoot",
             "lazyBoundary",
             "className",
             "quality",
@@ -479,6 +515,8 @@
             "placeholder",
             "blurDataURL"
           ]);
+        var ref4;
+        var imgRef = (0, _react).useRef(null);
         var rest = all;
         var layout = sizes ? "responsive" : "intrinsic";
         if ("layout" in rest) {
@@ -522,7 +560,12 @@
           unoptimized = true;
           isLazy = false;
         }
-        if (true && loadedImageURLs.has(src)) {
+        if (
+          true &&
+          ((ref4 = imgRef.current) === null || ref4 === void 0
+            ? void 0
+            : ref4.complete)
+        ) {
           isLazy = false;
         }
         if (false) {
@@ -530,12 +573,13 @@
         }
         var ref3 = _slicedToArray(
             (0, _useIntersection).useIntersection({
+              rootRef: lazyRoot,
               rootMargin: lazyBoundary,
               disabled: !isLazy
             }),
             2
           ),
-          setRef = ref3[0],
+          setIntersection = ref3[0],
           isIntersected = ref3[1];
         var isVisible = !isLazy || isIntersected;
         var wrapperStyle = {
@@ -562,7 +606,7 @@
           padding: 0
         };
         var hasSizer = false;
-        var sizerSvg;
+        var sizerSvgUrl;
         var imgStyle = {
           position: "absolute",
           top: 0,
@@ -622,12 +666,10 @@
             wrapperStyle.maxWidth = "100%";
             hasSizer = true;
             sizerStyle.maxWidth = "100%";
-            sizerSvg = '<svg width="'
-              .concat(widthInt, '" height="')
-              .concat(
-                heightInt,
-                '" xmlns="http://www.w3.org/2000/svg" version="1.1"/>'
-              );
+            // url encoded svg is a little bit shorten than base64 encoding
+            sizerSvgUrl = "data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 version=%271.1%27 width=%27"
+              .concat(widthInt, "%27 height=%27")
+              .concat(heightInt, "%27/%3e");
           } else if (layout === "fixed") {
             // <Image src="i.png" width="100" height="100" layout="fixed" />
             wrapperStyle.display = "inline-block";
@@ -670,6 +712,32 @@
           _defineProperty(_obj, imageSrcSetPropName, imgAttributes.srcSet),
           _defineProperty(_obj, imageSizesPropName, imgAttributes.sizes),
           _obj);
+        var useLayoutEffect = false ? 0 : _react.default.useLayoutEffect;
+        var onLoadingCompleteRef = (0, _react).useRef(onLoadingComplete);
+        (0, _react).useEffect(
+          function() {
+            onLoadingCompleteRef.current = onLoadingComplete;
+          },
+          [onLoadingComplete]
+        );
+        useLayoutEffect(
+          function() {
+            setIntersection(imgRef.current);
+          },
+          [setIntersection]
+        );
+        (0, _react).useEffect(
+          function() {
+            handleLoading(
+              imgRef,
+              srcString,
+              layout,
+              placeholder,
+              onLoadingCompleteRef
+            );
+          },
+          [srcString, layout, placeholder, isVisible]
+        );
         return /*#__PURE__*/ _react.default.createElement(
           "span",
           {
@@ -681,7 +749,7 @@
                 {
                   style: sizerStyle
                 },
-                sizerSvg
+                sizerSvgUrl
                   ? /*#__PURE__*/ _react.default.createElement("img", {
                       style: {
                         display: "block",
@@ -696,9 +764,7 @@
                       },
                       alt: "",
                       "aria-hidden": true,
-                      src: "data:image/svg+xml;base64,".concat(
-                        (0, _toBase64).toBase64(sizerSvg)
-                      )
+                      src: sizerSvgUrl
                     })
                   : null
               )
@@ -709,16 +775,7 @@
               decoding: "async",
               "data-nimg": layout,
               className: className,
-              ref: function(img) {
-                setRef(img);
-                handleLoading(
-                  img,
-                  srcString,
-                  layout,
-                  placeholder,
-                  onLoadingComplete
-                );
-              },
+              ref: imgRef,
               style: _objectSpread({}, imgStyle, blurStyle)
             })
           ),
@@ -925,13 +982,20 @@
       var _requestIdleCallback = __webpack_require__(9311);
       var hasIntersectionObserver = typeof IntersectionObserver !== "undefined";
       function useIntersection(param) {
-        var rootMargin = param.rootMargin,
+        var rootRef = param.rootRef,
+          rootMargin = param.rootMargin,
           disabled = param.disabled;
         var isDisabled = disabled || !hasIntersectionObserver;
         var unobserve = (0, _react).useRef();
         var ref = _slicedToArray((0, _react).useState(false), 2),
           visible = ref[0],
           setVisible = ref[1];
+        var ref1 = _slicedToArray(
+            (0, _react).useState(rootRef ? rootRef.current : null),
+            2
+          ),
+          root = ref1[0],
+          setRoot = ref1[1];
         var setRef = (0, _react).useCallback(
           function(el) {
             if (unobserve.current) {
@@ -946,12 +1010,13 @@
                   return isVisible && setVisible(isVisible);
                 },
                 {
+                  root: root,
                   rootMargin: rootMargin
                 }
               );
             }
           },
-          [isDisabled, rootMargin, visible]
+          [isDisabled, root, rootMargin, visible]
         );
         (0, _react).useEffect(
           function() {
@@ -971,6 +1036,12 @@
           },
           [visible]
         );
+        (0, _react).useEffect(
+          function() {
+            if (rootRef) setRoot(rootRef.current);
+          },
+          [rootRef]
+        );
         return [setRef, visible];
       }
       function observe(element, callback, options) {
@@ -1021,23 +1092,6 @@
       /***/
     },
 
-    /***/ 6978: /***/ function(__unused_webpack_module, exports) {
-      "use strict";
-
-      Object.defineProperty(exports, "__esModule", {
-        value: true
-      });
-      exports.toBase64 = toBase64;
-      function toBase64(str) {
-        if (false) {
-        } else {
-          return window.btoa(str);
-        }
-      } //# sourceMappingURL=to-base-64.js.map
-
-      /***/
-    },
-
     /***/ 5924: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,

Diff for link-HASH.js

@@ -398,13 +398,20 @@
       var _requestIdleCallback = __webpack_require__(9311);
       var hasIntersectionObserver = typeof IntersectionObserver !== "undefined";
       function useIntersection(param) {
-        var rootMargin = param.rootMargin,
+        var rootRef = param.rootRef,
+          rootMargin = param.rootMargin,
           disabled = param.disabled;
         var isDisabled = disabled || !hasIntersectionObserver;
         var unobserve = (0, _react).useRef();
         var ref = _slicedToArray((0, _react).useState(false), 2),
           visible = ref[0],
           setVisible = ref[1];
+        var ref1 = _slicedToArray(
+            (0, _react).useState(rootRef ? rootRef.current : null),
+            2
+          ),
+          root = ref1[0],
+          setRoot = ref1[1];
         var setRef = (0, _react).useCallback(
           function(el) {
             if (unobserve.current) {
@@ -419,12 +426,13 @@
                   return isVisible && setVisible(isVisible);
                 },
                 {
+                  root: root,
                   rootMargin: rootMargin
                 }
               );
             }
           },
-          [isDisabled, rootMargin, visible]
+          [isDisabled, root, rootMargin, visible]
         );
         (0, _react).useEffect(
           function() {
@@ -444,6 +452,12 @@
           },
           [visible]
         );
+        (0, _react).useEffect(
+          function() {
+            if (rootRef) setRoot(rootRef.current);
+          },
+          [rootRef]
+        );
         return [setRef, visible];
       }
       function observe(element, callback, options) {

Diff for main-HASH.js

@@ -596,11 +596,39 @@
         for (var i = 1; i < arguments.length; i++) _loop(i);
         return target;
       }
+      function _objectWithoutProperties(source, excluded) {
+        if (source == null) return {};
+        var target = _objectWithoutPropertiesLoose(source, excluded);
+        var key, i;
+        if (Object.getOwnPropertySymbols) {
+          var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+          for (i = 0; i < sourceSymbolKeys.length; i++) {
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key))
+              continue;
+            target[key] = source[key];
+          }
+        }
+        return target;
+      }
+      function _objectWithoutPropertiesLoose(source, excluded) {
+        if (source == null) return {};
+        var target = {};
+        var sourceKeys = Object.keys(source);
+        var key, i;
+        for (i = 0; i < sourceKeys.length; i++) {
+          key = sourceKeys[i];
+          if (excluded.indexOf(key) >= 0) continue;
+          target[key] = source[key];
+        }
+        return target;
+      }
       var data = JSON.parse(
         document.getElementById("__NEXT_DATA__").textContent
       );
       window.__NEXT_DATA__ = data;
-      var version = "12.0.8";
+      var version = "12.0.9-canary.9";
       exports.version = version;
       var looseToArray = function(input) {
         return [].slice.call(input);
@@ -883,7 +911,9 @@
                       }
                       isValidElementType = Object(
                         (function webpackMissingModule() {
-                          var e = new Error("Cannot find module 'react-is'");
+                          var e = new Error(
+                            "Cannot find module 'next/dist/compiled/react-is'"
+                          );
                           e.code = "MODULE_NOT_FOUND";
                           throw e;
                         })()
@@ -1208,6 +1238,16 @@
           )
         );
       }
+      function renderApp(App, appProps) {
+        if (false) {
+          var Component, _, __, props;
+        } else {
+          return /*#__PURE__*/ _react.default.createElement(
+            App,
+            Object.assign({}, appProps)
+          );
+        }
+      }
       var wrapApp = function(App) {
         return function(wrappedAppProps) {
           var appProps = _objectSpread({}, wrappedAppProps, {
@@ -1218,10 +1258,7 @@
           return /*#__PURE__*/ _react.default.createElement(
             AppContainer,
             null,
-            /*#__PURE__*/ _react.default.createElement(
-              App,
-              Object.assign({}, appProps)
-            )
+            renderApp(App, appProps)
           );
         };
       };
@@ -1383,10 +1420,7 @@
           /*#__PURE__*/ _react.default.createElement(
             AppContainer,
             null,
-            /*#__PURE__*/ _react.default.createElement(
-              App,
-              Object.assign({}, appProps)
-            ),
+            renderApp(App, appProps),
             /*#__PURE__*/ _react.default.createElement(
               _portal.Portal,
               {
@@ -5654,7 +5688,7 @@
                             isValidElementType = Object(
                               (function webpackMissingModule() {
                                 var e = new Error(
-                                  "Cannot find module 'react-is'"
+                                  "Cannot find module 'next/dist/compiled/react-is'"
                                 );
                                 e.code = "MODULE_NOT_FOUND";
                                 throw e;
@@ -7755,8 +7789,8 @@
       exports.loadGetInitialProps = loadGetInitialProps;
       exports.formatWithValidation = formatWithValidation;
       exports.HtmlContext = exports.ST = exports.SP = exports.urlObjectKeys = void 0;
-      var _formatUrl = __webpack_require__(4611);
       var _react = __webpack_require__(7294);
+      var _formatUrl = __webpack_require__(4611);
       function execOnce(fn) {
         var used = false;
         var result;

Diff for webpack-HASH.js

@@ -416,7 +416,7 @@
           /******/ installedChunks[chunkId][0]();
           /******/
         }
-        /******/ installedChunks[chunkIds[i]] = 0;
+        /******/ installedChunks[chunkId] = 0;
         /******/
       }
       /******/ return __webpack_require__.O(result);

Diff for index.html

@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-8244d589778df4b1.js"
+      src="/_next/static/chunks/webpack-019d6affc74a3adc.js"
       defer=""
     ></script>
     <script
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-0e760a439e037330.js"
+      src="/_next/static/chunks/main-eccf786a39638724.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-8244d589778df4b1.js"
+      src="/_next/static/chunks/webpack-019d6affc74a3adc.js"
       defer=""
     ></script>
     <script
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-0e760a439e037330.js"
+      src="/_next/static/chunks/main-eccf786a39638724.js"
       defer=""
     ></script>
     <script
@@ -27,7 +27,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/link-1339957a75cc3c85.js"
+      src="/_next/static/chunks/pages/link-f0a2c3bb0706d8b2.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>

Diff for withRouter.html

@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-8244d589778df4b1.js"
+      src="/_next/static/chunks/webpack-019d6affc74a3adc.js"
       defer=""
     ></script>
     <script
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-0e760a439e037330.js"
+      src="/_next/static/chunks/main-eccf786a39638724.js"
       defer=""
     ></script>
     <script

Default Build with SWC (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary v12.0.8	vercel/next.js refs/heads/canary	Change
buildDuration	19s	16.2s	-2.7s
buildDurationCached	3.2s	3.2s	-13ms
nodeModulesSize	359 MB	356 MB	-2.93 MB

Page Load Tests Overall increase ✓

	vercel/next.js canary v12.0.8	vercel/next.js refs/heads/canary	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.935	2.999	⚠️ +0.06
/ avg req/sec	851.77	833.5	⚠️ -18.27
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.401	1.377	-0.02
/error-in-render avg req/sec	1783.89	1814.94	+31.05

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary v12.0.8	vercel/next.js refs/heads/canary	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	27.3 kB	27.3 kB	⚠️ +13 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	-3 B
Overall change	71.3 kB	71.3 kB	⚠️ +10 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary v12.0.8	vercel/next.js refs/heads/canary	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary v12.0.8	vercel/next.js refs/heads/canary	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.36 kB	2.36 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	911 B	911 B	✓
image-HASH.js gzip	4.77 kB	4.97 kB	⚠️ +198 B
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.19 kB	2.21 kB	⚠️ +17 B
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.1 kB	14.3 kB	⚠️ +215 B

Client Build Manifests

	vercel/next.js canary v12.0.8	vercel/next.js refs/heads/canary	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary v12.0.8	vercel/next.js refs/heads/canary	Change
index.html gzip	533 B	529 B	-4 B
link.html gzip	546 B	543 B	-3 B
withRouter.html gzip	527 B	525 B	-2 B
Overall change	1.61 kB	1.6 kB	-9 B

Diffs

Diff for _buildManifest.js

@@ -12,8 +12,8 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-538d621a0e670391.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-3cbae1287e809392.js"],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-1339957a75cc3c85.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-b1f110951983876f.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-f0a2c3bb0706d8b2.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"
   ],

Diff for image-HASH.js

@@ -127,9 +127,8 @@
         value: true
       };
       exports["default"] = Image;
-      var _react = _interopRequireDefault(__webpack_require__(7294));
+      var _react = _interopRequireWildcard(__webpack_require__(7294));
       var _head = _interopRequireDefault(__webpack_require__(5443));
-      var _toBase64 = __webpack_require__(6978);
       var _imageConfig = __webpack_require__(5809);
       var _useIntersection = __webpack_require__(7190);
       function _defineProperty1(obj, key, value) {
@@ -152,6 +151,30 @@
               default: obj
             };
       }
+      function _interopRequireWildcard(obj) {
+        if (obj && obj.__esModule) {
+          return obj;
+        } else {
+          var newObj = {};
+          if (obj != null) {
+            for (var key in obj) {
+              if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                var desc =
+                  Object.defineProperty && Object.getOwnPropertyDescriptor
+                    ? Object.getOwnPropertyDescriptor(obj, key)
+                    : {};
+                if (desc.get || desc.set) {
+                  Object.defineProperty(newObj, key, desc);
+                } else {
+                  newObj[key] = obj[key];
+                }
+              }
+            }
+          }
+          newObj.default = obj;
+          return newObj;
+        }
+      }
       function _objectSpread(target) {
         var _arguments = arguments,
           _loop = function(i) {
@@ -202,7 +225,6 @@
         }
         return target;
       }
-      var loadedImageURLs = new Set();
       var allImgs = new Map();
       var perfObserver;
       var emptyDataURL =
@@ -399,27 +421,36 @@
       }
       // See https://stackoverflow.com/q/39777833/266535 for why we use this ref
       // handler instead of the img's onLoad attribute.
-      function handleLoading(img, src, layout, placeholder, onLoadingComplete) {
-        if (!img) {
-          return;
-        }
+      function handleLoading(
+        imgRef,
+        src,
+        layout,
+        placeholder,
+        onLoadingCompleteRef
+      ) {
         var handleLoad = function() {
+          var img = imgRef.current;
+          if (!img) {
+            return;
+          }
           if (img.src !== emptyDataURL) {
             var p = "decode" in img ? img.decode() : Promise.resolve();
             p.catch(function() {}).then(function() {
+              if (!imgRef.current) {
+                return;
+              }
               if (placeholder === "blur") {
                 img.style.filter = "";
                 img.style.backgroundSize = "";
                 img.style.backgroundImage = "";
                 img.style.backgroundPosition = "";
               }
-              loadedImageURLs.add(src);
-              if (onLoadingComplete) {
+              if (onLoadingCompleteRef.current) {
                 var naturalWidth = img.naturalWidth,
                   naturalHeight = img.naturalHeight;
                 // Pass back read-only primitive values but not the
                 // underlying DOM element because it could be misused.
-                onLoadingComplete({
+                onLoadingCompleteRef.current({
                   naturalWidth: naturalWidth,
                   naturalHeight: naturalHeight
                 });
@@ -430,13 +461,15 @@
             });
           }
         };
-        if (img.complete) {
-          // If the real image fails to load, this will still remove the placeholder.
-          // This is the desired behavior for now, and will be revisited when error
-          // handling is worked on for the image component itself.
-          handleLoad();
-        } else {
-          img.onload = handleLoad;
+        if (imgRef.current) {
+          if (imgRef.current.complete) {
+            // If the real image fails to load, this will still remove the placeholder.
+            // This is the desired behavior for now, and will be revisited when error
+            // handling is worked on for the image component itself.
+            handleLoad();
+          } else {
+            imgRef.current.onload = handleLoad;
+          }
         }
       }
       function Image(_param) {
@@ -447,6 +480,8 @@
           _priority = _param.priority,
           priority = _priority === void 0 ? false : _priority,
           loading = _param.loading,
+          _lazyRoot = _param.lazyRoot,
+          lazyRoot = _lazyRoot === void 0 ? null : _lazyRoot,
           _lazyBoundary = _param.lazyBoundary,
           lazyBoundary = _lazyBoundary === void 0 ? "200px" : _lazyBoundary,
           className = _param.className,
@@ -467,6 +502,7 @@
             "unoptimized",
             "priority",
             "loading",
+            "lazyRoot",
             "lazyBoundary",
             "className",
             "quality",
@@ -479,6 +515,8 @@
             "placeholder",
             "blurDataURL"
           ]);
+        var ref4;
+        var imgRef = (0, _react).useRef(null);
         var rest = all;
         var layout = sizes ? "responsive" : "intrinsic";
         if ("layout" in rest) {
@@ -522,7 +560,12 @@
           unoptimized = true;
           isLazy = false;
         }
-        if (true && loadedImageURLs.has(src)) {
+        if (
+          true &&
+          ((ref4 = imgRef.current) === null || ref4 === void 0
+            ? void 0
+            : ref4.complete)
+        ) {
           isLazy = false;
         }
         if (false) {
@@ -530,12 +573,13 @@
         }
         var ref3 = _slicedToArray(
             (0, _useIntersection).useIntersection({
+              rootRef: lazyRoot,
               rootMargin: lazyBoundary,
               disabled: !isLazy
             }),
             2
           ),
-          setRef = ref3[0],
+          setIntersection = ref3[0],
           isIntersected = ref3[1];
         var isVisible = !isLazy || isIntersected;
         var wrapperStyle = {
@@ -562,7 +606,7 @@
           padding: 0
         };
         var hasSizer = false;
-        var sizerSvg;
+        var sizerSvgUrl;
         var imgStyle = {
           position: "absolute",
           top: 0,
@@ -622,12 +666,10 @@
             wrapperStyle.maxWidth = "100%";
             hasSizer = true;
             sizerStyle.maxWidth = "100%";
-            sizerSvg = '<svg width="'
-              .concat(widthInt, '" height="')
-              .concat(
-                heightInt,
-                '" xmlns="http://www.w3.org/2000/svg" version="1.1"/>'
-              );
+            // url encoded svg is a little bit shorten than base64 encoding
+            sizerSvgUrl = "data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 version=%271.1%27 width=%27"
+              .concat(widthInt, "%27 height=%27")
+              .concat(heightInt, "%27/%3e");
           } else if (layout === "fixed") {
             // <Image src="i.png" width="100" height="100" layout="fixed" />
             wrapperStyle.display = "inline-block";
@@ -670,6 +712,32 @@
           _defineProperty(_obj, imageSrcSetPropName, imgAttributes.srcSet),
           _defineProperty(_obj, imageSizesPropName, imgAttributes.sizes),
           _obj);
+        var useLayoutEffect = false ? 0 : _react.default.useLayoutEffect;
+        var onLoadingCompleteRef = (0, _react).useRef(onLoadingComplete);
+        (0, _react).useEffect(
+          function() {
+            onLoadingCompleteRef.current = onLoadingComplete;
+          },
+          [onLoadingComplete]
+        );
+        useLayoutEffect(
+          function() {
+            setIntersection(imgRef.current);
+          },
+          [setIntersection]
+        );
+        (0, _react).useEffect(
+          function() {
+            handleLoading(
+              imgRef,
+              srcString,
+              layout,
+              placeholder,
+              onLoadingCompleteRef
+            );
+          },
+          [srcString, layout, placeholder, isVisible]
+        );
         return /*#__PURE__*/ _react.default.createElement(
           "span",
           {
@@ -681,7 +749,7 @@
                 {
                   style: sizerStyle
                 },
-                sizerSvg
+                sizerSvgUrl
                   ? /*#__PURE__*/ _react.default.createElement("img", {
                       style: {
                         display: "block",
@@ -696,9 +764,7 @@
                       },
                       alt: "",
                       "aria-hidden": true,
-                      src: "data:image/svg+xml;base64,".concat(
-                        (0, _toBase64).toBase64(sizerSvg)
-                      )
+                      src: sizerSvgUrl
                     })
                   : null
               )
@@ -709,16 +775,7 @@
               decoding: "async",
               "data-nimg": layout,
               className: className,
-              ref: function(img) {
-                setRef(img);
-                handleLoading(
-                  img,
-                  srcString,
-                  layout,
-                  placeholder,
-                  onLoadingComplete
-                );
-              },
+              ref: imgRef,
               style: _objectSpread({}, imgStyle, blurStyle)
             })
           ),
@@ -925,13 +982,20 @@
       var _requestIdleCallback = __webpack_require__(9311);
       var hasIntersectionObserver = typeof IntersectionObserver !== "undefined";
       function useIntersection(param) {
-        var rootMargin = param.rootMargin,
+        var rootRef = param.rootRef,
+          rootMargin = param.rootMargin,
           disabled = param.disabled;
         var isDisabled = disabled || !hasIntersectionObserver;
         var unobserve = (0, _react).useRef();
         var ref = _slicedToArray((0, _react).useState(false), 2),
           visible = ref[0],
           setVisible = ref[1];
+        var ref1 = _slicedToArray(
+            (0, _react).useState(rootRef ? rootRef.current : null),
+            2
+          ),
+          root = ref1[0],
+          setRoot = ref1[1];
         var setRef = (0, _react).useCallback(
           function(el) {
             if (unobserve.current) {
@@ -946,12 +1010,13 @@
                   return isVisible && setVisible(isVisible);
                 },
                 {
+                  root: root,
                   rootMargin: rootMargin
                 }
               );
             }
           },
-          [isDisabled, rootMargin, visible]
+          [isDisabled, root, rootMargin, visible]
         );
         (0, _react).useEffect(
           function() {
@@ -971,6 +1036,12 @@
           },
           [visible]
         );
+        (0, _react).useEffect(
+          function() {
+            if (rootRef) setRoot(rootRef.current);
+          },
+          [rootRef]
+        );
         return [setRef, visible];
       }
       function observe(element, callback, options) {
@@ -1021,23 +1092,6 @@
       /***/
     },
 
-    /***/ 6978: /***/ function(__unused_webpack_module, exports) {
-      "use strict";
-
-      Object.defineProperty(exports, "__esModule", {
-        value: true
-      });
-      exports.toBase64 = toBase64;
-      function toBase64(str) {
-        if (false) {
-        } else {
-          return window.btoa(str);
-        }
-      } //# sourceMappingURL=to-base-64.js.map
-
-      /***/
-    },
-
     /***/ 5924: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,

Diff for link-HASH.js

@@ -398,13 +398,20 @@
       var _requestIdleCallback = __webpack_require__(9311);
       var hasIntersectionObserver = typeof IntersectionObserver !== "undefined";
       function useIntersection(param) {
-        var rootMargin = param.rootMargin,
+        var rootRef = param.rootRef,
+          rootMargin = param.rootMargin,
           disabled = param.disabled;
         var isDisabled = disabled || !hasIntersectionObserver;
         var unobserve = (0, _react).useRef();
         var ref = _slicedToArray((0, _react).useState(false), 2),
           visible = ref[0],
           setVisible = ref[1];
+        var ref1 = _slicedToArray(
+            (0, _react).useState(rootRef ? rootRef.current : null),
+            2
+          ),
+          root = ref1[0],
+          setRoot = ref1[1];
         var setRef = (0, _react).useCallback(
           function(el) {
             if (unobserve.current) {
@@ -419,12 +426,13 @@
                   return isVisible && setVisible(isVisible);
                 },
                 {
+                  root: root,
                   rootMargin: rootMargin
                 }
               );
             }
           },
-          [isDisabled, rootMargin, visible]
+          [isDisabled, root, rootMargin, visible]
         );
         (0, _react).useEffect(
           function() {
@@ -444,6 +452,12 @@
           },
           [visible]
         );
+        (0, _react).useEffect(
+          function() {
+            if (rootRef) setRoot(rootRef.current);
+          },
+          [rootRef]
+        );
         return [setRef, visible];
       }
       function observe(element, callback, options) {

Diff for main-HASH.js

@@ -596,11 +596,39 @@
         for (var i = 1; i < arguments.length; i++) _loop(i);
         return target;
       }
+      function _objectWithoutProperties(source, excluded) {
+        if (source == null) return {};
+        var target = _objectWithoutPropertiesLoose(source, excluded);
+        var key, i;
+        if (Object.getOwnPropertySymbols) {
+          var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+          for (i = 0; i < sourceSymbolKeys.length; i++) {
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key))
+              continue;
+            target[key] = source[key];
+          }
+        }
+        return target;
+      }
+      function _objectWithoutPropertiesLoose(source, excluded) {
+        if (source == null) return {};
+        var target = {};
+        var sourceKeys = Object.keys(source);
+        var key, i;
+        for (i = 0; i < sourceKeys.length; i++) {
+          key = sourceKeys[i];
+          if (excluded.indexOf(key) >= 0) continue;
+          target[key] = source[key];
+        }
+        return target;
+      }
       var data = JSON.parse(
         document.getElementById("__NEXT_DATA__").textContent
       );
       window.__NEXT_DATA__ = data;
-      var version = "12.0.8";
+      var version = "12.0.9-canary.9";
       exports.version = version;
       var looseToArray = function(input) {
         return [].slice.call(input);
@@ -883,7 +911,9 @@
                       }
                       isValidElementType = Object(
                         (function webpackMissingModule() {
-                          var e = new Error("Cannot find module 'react-is'");
+                          var e = new Error(
+                            "Cannot find module 'next/dist/compiled/react-is'"
+                          );
                           e.code = "MODULE_NOT_FOUND";
                           throw e;
                         })()
@@ -1208,6 +1238,16 @@
           )
         );
       }
+      function renderApp(App, appProps) {
+        if (false) {
+          var Component, _, __, props;
+        } else {
+          return /*#__PURE__*/ _react.default.createElement(
+            App,
+            Object.assign({}, appProps)
+          );
+        }
+      }
       var wrapApp = function(App) {
         return function(wrappedAppProps) {
           var appProps = _objectSpread({}, wrappedAppProps, {
@@ -1218,10 +1258,7 @@
           return /*#__PURE__*/ _react.default.createElement(
             AppContainer,
             null,
-            /*#__PURE__*/ _react.default.createElement(
-              App,
-              Object.assign({}, appProps)
-            )
+            renderApp(App, appProps)
           );
         };
       };
@@ -1383,10 +1420,7 @@
           /*#__PURE__*/ _react.default.createElement(
             AppContainer,
             null,
-            /*#__PURE__*/ _react.default.createElement(
-              App,
-              Object.assign({}, appProps)
-            ),
+            renderApp(App, appProps),
             /*#__PURE__*/ _react.default.createElement(
               _portal.Portal,
               {
@@ -5654,7 +5688,7 @@
                             isValidElementType = Object(
                               (function webpackMissingModule() {
                                 var e = new Error(
-                                  "Cannot find module 'react-is'"
+                                  "Cannot find module 'next/dist/compiled/react-is'"
                                 );
                                 e.code = "MODULE_NOT_FOUND";
                                 throw e;
@@ -7755,8 +7789,8 @@
       exports.loadGetInitialProps = loadGetInitialProps;
       exports.formatWithValidation = formatWithValidation;
       exports.HtmlContext = exports.ST = exports.SP = exports.urlObjectKeys = void 0;
-      var _formatUrl = __webpack_require__(4611);
       var _react = __webpack_require__(7294);
+      var _formatUrl = __webpack_require__(4611);
       function execOnce(fn) {
         var used = false;
         var result;

Diff for webpack-HASH.js

@@ -416,7 +416,7 @@
           /******/ installedChunks[chunkId][0]();
           /******/
         }
-        /******/ installedChunks[chunkIds[i]] = 0;
+        /******/ installedChunks[chunkId] = 0;
         /******/
       }
       /******/ return __webpack_require__.O(result);

Diff for index.html

@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-8244d589778df4b1.js"
+      src="/_next/static/chunks/webpack-019d6affc74a3adc.js"
       defer=""
     ></script>
     <script
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-0e760a439e037330.js"
+      src="/_next/static/chunks/main-eccf786a39638724.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-8244d589778df4b1.js"
+      src="/_next/static/chunks/webpack-019d6affc74a3adc.js"
       defer=""
     ></script>
     <script
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-0e760a439e037330.js"
+      src="/_next/static/chunks/main-eccf786a39638724.js"
       defer=""
     ></script>
     <script
@@ -27,7 +27,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/link-1339957a75cc3c85.js"
+      src="/_next/static/chunks/pages/link-f0a2c3bb0706d8b2.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>

Diff for withRouter.html

@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-8244d589778df4b1.js"
+      src="/_next/static/chunks/webpack-019d6affc74a3adc.js"
       defer=""
     ></script>
     <script
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-0e760a439e037330.js"
+      src="/_next/static/chunks/main-eccf786a39638724.js"
       defer=""
     ></script>
     <script

-Original file line number
+Diff line change
@@ Expand Up / @@ -16,5 +16,5 @@ @@
           "registry": "https://registry.npmjs.org/"
         }
       },
-      "version": "12.0.9-canary.8"
+      "version": "12.0.9-canary.9"
     }

-Original file line number
+Diff line change
@@ -1,6 +1,6 @@
     {
       "name": "create-next-app",
-      "version": "12.0.9-canary.8",
+      "version": "12.0.9-canary.9",
       "keywords": [
         "react",
         "next",
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -1,6 +1,6 @@
     {
       "name": "eslint-config-next",
-      "version": "12.0.9-canary.8",
+      "version": "12.0.9-canary.9",
       "description": "ESLint configuration used by NextJS.",
       "main": "index.js",
       "license": "MIT",
@@ Expand All / @@ -9,7 +9,7 @@ @@
         "directory": "packages/eslint-config-next"
       },
       "dependencies": {
-        "@next/eslint-plugin-next": "12.0.9-canary.8",
+        "@next/eslint-plugin-next": "12.0.9-canary.9",
         "@rushstack/eslint-patch": "^1.0.8",
         "@typescript-eslint/parser": "^5.0.0",
         "eslint-import-resolver-node": "^0.3.4",
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -1,6 +1,6 @@
     {
       "name": "@next/eslint-plugin-next",
-      "version": "12.0.9-canary.8",
+      "version": "12.0.9-canary.9",
       "description": "ESLint plugin for NextJS.",
       "main": "lib/index.js",
       "license": "MIT",
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -1,6 +1,6 @@
     {
       "name": "@next/bundle-analyzer",
-      "version": "12.0.9-canary.8",
+      "version": "12.0.9-canary.9",
       "main": "index.js",
       "license": "MIT",
       "repository": {
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Commit

There are no files selected for viewing

1 comment on commit `8d1c585`

ijjk commented on `8d1c585` Jan 25, 2022

Commit

There are no files selected for viewing

1 comment on commit 8d1c585

ijjk commented on 8d1c585 Jan 25, 2022

Choose a reason for hiding this comment

Stats from current release

Diffs

Diffs

1 comment on commit `8d1c585`

ijjk commented on `8d1c585` Jan 25, 2022