Skip to content

Upgrading babel packages to get better tree shaking with react #14981

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
Closed
Bjodol wants to merge 4 commits into from
Closed

Upgrading babel packages to get better tree shaking with react #14981

Bjodol wants to merge 4 commits into from

Conversation

@Bjodol
Copy link

@Bjodol Bjodol commented Jul 8, 2020

Why?

As part of babel 7.10.0 tree-shaking for react has become way better. Among the changes is removal of react pure functions such as React.forwardRef and React.memo. This will in cases where bigger component libraries are potentially reduce the initial bundle-size quite significantly. You could always ask, why not just import the things you need? Well in my case an internal design system is bundled as one package and restructuring it to smaller bundles is currently not prioritized. So by having better tree-shaking it would solve the problem downstream instead of upstream.

What

  • Simply made changes to babel version numbers for the nextjs package and the core repository.
  • Noteworthy: In the core repository I changed the package from babel-core to @babel/core

As this is my first time submission I hope everything is up to standards and will take any input provided :)

@ijjk ijjk added the type: next label Jul 8, 2020
@ijjk
Copy link
Member

ijjk commented Jul 8, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
buildDuration 12.4s 11.9s -502ms
nodeModulesSize 65.9 MB 65.1 MB -802 kB
Page Load Tests Overall increase ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.264 2.098 -0.17
/ avg req/sec 1104.3 1191.8 +87.5
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.463 1.33 -0.13
/error-in-render avg req/sec 1708.82 1879.22 +170.4
Client Bundles (main, webpack, commons) Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
main-HASH.js gzip 6.63 kB 6.62 kB -8 B
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..c646.js gzip 10.7 kB 10.7 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57.2 kB 57.2 kB -8 B
Client Bundles (main, webpack, commons) Modern Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
main-HASH.module.js gzip 5.71 kB 5.71 kB -10 B
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.1 kB 7.1 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.7 kB 52.7 kB -10 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests Overall increase ⚠️
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
_buildManifest.js gzip 268 B 267 B -1 B
_buildManife..dule.js gzip 272 B 274 B ⚠️ +2 B
Overall change 540 B 541 B ⚠️ +1 B
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
index.html gzip 954 B 953 B -1 B
link.html gzip 960 B 960 B ✓
withRouter.html gzip 946 B 944 B -2 B
Overall change 2.86 kB 2.86 kB -3 B

Diffs

Diff for _buildManifest.js 
@@ -1,8 +1,8 @@
 self.__BUILD_MANIFEST = {
   "/": ["static\u002Fpages\u002Findex-f35cd1774d910f5523ed.js"],
-  "/_error": ["static\u002Fpages\u002F_error-f39e6723c6acde17325a.js"],
+  "/_error": ["static\u002Fpages\u002F_error-b5c3e8d3fd7cb18089e0.js"],
   "/hooks": ["static\u002Fpages\u002Fhooks-9e216cd51bf04b309e08.js"],
-  "/link": ["static\u002Fpages\u002Flink-d0cd3d2b80934d6c003a.js"],
+  "/link": ["static\u002Fpages\u002Flink-9cbc3acb75186d5885ae.js"],
   "/routerDirect": [
     "static\u002Fpages\u002FrouterDirect-b95d3f54c75949a43da6.js"
   ],
Diff for _buildManifest.module.js 
@@ -1,8 +1,8 @@
 self.__BUILD_MANIFEST = {
   "/": ["static\u002Fpages\u002Findex-da343bca3b67f1bcf42d.module.js"],
-  "/_error": ["static\u002Fpages\u002F_error-b3c4c3f8dbb1417657e6.module.js"],
+  "/_error": ["static\u002Fpages\u002F_error-b51f16b902f3e71973eb.module.js"],
   "/hooks": ["static\u002Fpages\u002Fhooks-dc8f274035a2839a1e61.module.js"],
-  "/link": ["static\u002Fpages\u002Flink-5a10d6c964f4c88363cd.module.js"],
+  "/link": ["static\u002Fpages\u002Flink-a90c99c9a9ddaa07df87.module.js"],
   "/routerDirect": [
     "static\u002Fpages\u002FrouterDirect-c62f258dff7fece0a732.module.js"
   ],
Diff for 19b7e98f51cc..73.module.js 
@@ -1931,7 +1931,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             };
       }
 
-      var RouterContext = _react.default.createContext(null);
+      var RouterContext = /*#__PURE__*/ _react.default.createContext(null);
 
       exports.RouterContext = RouterContext;
Diff for 19b7e98f51cc..d0645a966.js 
@@ -3184,7 +3184,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             };
       }
 
-      var RouterContext = _react["default"].createContext(null);
+      var RouterContext = /*#__PURE__*/ _react["default"].createContext(null);
 
       exports.RouterContext = RouterContext;
Diff for main-HASH.js 
@@ -178,7 +178,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
             };
       }
 
-      var HeadManagerContext = _react["default"].createContext({});
+      var HeadManagerContext = /*#__PURE__*/ _react["default"].createContext(
+        {}
+      );
 
       exports.HeadManagerContext = HeadManagerContext;
 
@@ -402,7 +404,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                     "?" +
                     (0, _querystring.stringify)(
                       (0, _extends2["default"])(
-                        (0, _extends2["default"])({}, router.query),
+                        {},
+                        router.query,
                         (0, _querystring.parse)(location.search.substr(1))
                       )
                     ),
@@ -724,13 +727,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
 
                       _context2.next = 14;
                       return renderError(
-                        (0, _extends2["default"])(
-                          (0, _extends2["default"])({}, renderingProps),
-                          {},
-                          {
-                            err: _context2.t0
-                          }
-                        )
+                        (0, _extends2["default"])({}, renderingProps, {
+                          err: _context2.t0
+                        })
                       );
 
                     case 14:
@@ -784,15 +783,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
               : (0, _utils.loadGetInitialProps)(App, appCtx)
           ).then(function(initProps) {
             return doRender(
-              (0, _extends2["default"])(
-                (0, _extends2["default"])({}, renderErrorProps),
-                {},
-                {
-                  err: err,
-                  Component: ErrorComponent,
-                  props: initProps
-                }
-              )
+              (0, _extends2["default"])({}, renderErrorProps, {
+                err: err,
+                Component: ErrorComponent,
+                props: initProps
+              })
             );
           });
         });
@@ -923,15 +918,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
 
       var wrapApp = function wrapApp(App) {
         return function(wrappedAppProps) {
-          var appProps = (0, _extends2["default"])(
-            (0, _extends2["default"])({}, wrappedAppProps),
-            {},
-            {
-              Component: CachedComponent,
-              err: hydrateErr,
-              router: router
-            }
-          );
+          var appProps = (0, _extends2["default"])({}, wrappedAppProps, {
+            Component: CachedComponent,
+            err: hydrateErr,
+            router: router
+          });
           return /*#__PURE__*/ _react["default"].createElement(
             AppContainer,
             null,
@@ -965,15 +956,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                       (err = _ref9.err);
                     Component = Component || lastAppProps.Component;
                     props = props || lastAppProps.props;
-                    appProps = (0, _extends2["default"])(
-                      (0, _extends2["default"])({}, props),
-                      {},
-                      {
-                        Component: Component,
-                        err: err,
-                        router: router
-                      }
-                    ); // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
+                    appProps = (0, _extends2["default"])({}, props, {
+                      Component: Component,
+                      err: err,
+                      router: router
+                    }); // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
 
                     lastAppProps = appProps;
                     renderPromise = new Promise(function(resolve, reject) {
Diff for main-HASH.module.js 
@@ -143,7 +143,7 @@
             };
       }
 
-      var HeadManagerContext = _react.default.createContext({});
+      var HeadManagerContext = /*#__PURE__*/ _react.default.createContext({});
 
       exports.HeadManagerContext = HeadManagerContext;
 
@@ -298,7 +298,8 @@
                 "?" +
                 (0, _querystring.stringify)(
                   (0, _extends2.default)(
-                    (0, _extends2.default)({}, router.query),
+                    {},
+                    router.query,
                     (0, _querystring.parse)(location.search.substr(1))
                   )
                 ),
@@ -481,13 +482,9 @@
           }
 
           await renderError(
-            (0, _extends2.default)(
-              (0, _extends2.default)({}, renderingProps),
-              {},
-              {
-                err: renderErr
-              }
-            )
+            (0, _extends2.default)({}, renderingProps, {
+              err: renderErr
+            })
           );
         }
       } // This method handles all runtime and debug errors.
@@ -529,15 +526,11 @@
               : (0, _utils.loadGetInitialProps)(App, appCtx)
           ).then(initProps =>
             doRender(
-              (0, _extends2.default)(
-                (0, _extends2.default)({}, renderErrorProps),
-                {},
-                {
-                  err,
-                  Component: ErrorComponent,
-                  props: initProps
-                }
-              )
+              (0, _extends2.default)({}, renderErrorProps, {
+                err,
+                Component: ErrorComponent,
+                props: initProps
+              })
             )
           );
         });
@@ -663,15 +656,11 @@
       }
 
       var wrapApp = App => wrappedAppProps => {
-        var appProps = (0, _extends2.default)(
-          (0, _extends2.default)({}, wrappedAppProps),
-          {},
-          {
-            Component: CachedComponent,
-            err: hydrateErr,
-            router
-          }
-        );
+        var appProps = (0, _extends2.default)({}, wrappedAppProps, {
+          Component: CachedComponent,
+          err: hydrateErr,
+          router
+        });
         return /*#__PURE__*/ _react.default.createElement(
           AppContainer,
           null,
@@ -683,15 +672,11 @@
         var { App, Component, props, err } = _ref6;
         Component = Component || lastAppProps.Component;
         props = props || lastAppProps.props;
-        var appProps = (0, _extends2.default)(
-          (0, _extends2.default)({}, props),
-          {},
-          {
-            Component,
-            err,
-            router
-          }
-        ); // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
+        var appProps = (0, _extends2.default)({}, props, {
+          Component,
+          err,
+          router
+        }); // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
 
         lastAppProps = appProps;
         var resolvePromise;
Diff for index.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-ebe998339a21eae32e6a.module.js"
+      href="/_next/static/runtime/main-ea214265174005734536.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6892bb0ce1e47d97f973.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.d781e3a644a6963c2aec.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/runtime/polyfills-fa968511391ff096b874.js"
     ></script>
     <script
-      src="/_next/static/runtime/main-df9bcf41d7b3b9849696.js"
+      src="/_next/static/runtime/main-0b118356c0a49b38623d.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/runtime/main-ebe998339a21eae32e6a.module.js"
+      src="/_next/static/runtime/main-ea214265174005734536.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.ee8f39bc6cdd0645a966.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.370c2450b7af34fa1fbb.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6892bb0ce1e47d97f973.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.d781e3a644a6963c2aec.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-ebe998339a21eae32e6a.module.js"
+      href="/_next/static/runtime/main-ea214265174005734536.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6892bb0ce1e47d97f973.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.d781e3a644a6963c2aec.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -36,7 +36,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/pages/link-5a10d6c964f4c88363cd.module.js"
+      href="/_next/static/pages/link-a90c99c9a9ddaa07df87.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -86,13 +86,13 @@
       src="/_next/static/runtime/polyfills-fa968511391ff096b874.js"
     ></script>
     <script
-      src="/_next/static/runtime/main-df9bcf41d7b3b9849696.js"
+      src="/_next/static/runtime/main-0b118356c0a49b38623d.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/runtime/main-ebe998339a21eae32e6a.module.js"
+      src="/_next/static/runtime/main-ea214265174005734536.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.ee8f39bc6cdd0645a966.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.370c2450b7af34fa1fbb.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6892bb0ce1e47d97f973.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.d781e3a644a6963c2aec.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -146,13 +146,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/pages/link-d0cd3d2b80934d6c003a.js"
+      src="/_next/static/pages/link-9cbc3acb75186d5885ae.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/pages/link-5a10d6c964f4c88363cd.module.js"
+      src="/_next/static/pages/link-a90c99c9a9ddaa07df87.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-ebe998339a21eae32e6a.module.js"
+      href="/_next/static/runtime/main-ea214265174005734536.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6892bb0ce1e47d97f973.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.d781e3a644a6963c2aec.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/runtime/polyfills-fa968511391ff096b874.js"
     ></script>
     <script
-      src="/_next/static/runtime/main-df9bcf41d7b3b9849696.js"
+      src="/_next/static/runtime/main-0b118356c0a49b38623d.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/runtime/main-ebe998339a21eae32e6a.module.js"
+      src="/_next/static/runtime/main-ea214265174005734536.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.ee8f39bc6cdd0645a966.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.370c2450b7af34fa1fbb.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6892bb0ce1e47d97f973.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.d781e3a644a6963c2aec.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
buildDuration 12.3s 12.5s ⚠️ +265ms
nodeModulesSize 65.9 MB 65.1 MB -802 kB
Client Bundles (main, webpack, commons) Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
main-HASH.js gzip 6.63 kB 6.62 kB -8 B
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..c646.js gzip 10.7 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..78f2.js gzip N/A 10.7 kB N/A
Overall change 57.2 kB 57.2 kB -8 B
Client Bundles (main, webpack, commons) Modern Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
main-HASH.module.js gzip 5.71 kB 5.71 kB -10 B
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.1 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..dule.js gzip N/A 7.1 kB N/A
Overall change 52.7 kB 52.7 kB -10 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests Overall increase ⚠️
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
_buildManifest.js gzip 268 B 267 B -1 B
_buildManife..dule.js gzip 272 B 274 B ⚠️ +2 B
Overall change 540 B 541 B ⚠️ +1 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
_error.js 876 kB 877 kB ⚠️ +130 B
404.html 4.17 kB 4.17 kB ✓
hooks.html 3.79 kB 3.79 kB ✓
index.js 877 kB 877 kB ⚠️ +130 B
link.js 915 kB 915 kB ⚠️ +143 B
routerDirect.js 909 kB 909 kB ⚠️ +130 B
withRouter.js 909 kB 909 kB ⚠️ +130 B
Overall change 4.49 MB 4.49 MB ⚠️ +663 B
Commit: 808da4a

@ijjk
Copy link
Member

ijjk commented Jul 8, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
buildDuration 13s 13.3s ⚠️ +290ms
nodeModulesSize 65.9 MB 65.1 MB -802 kB
Page Load Tests Overall increase ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.256 2.228 -0.03
/ avg req/sec 1108.24 1122.26 +14.02
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.529 1.528 0
/error-in-render avg req/sec 1634.89 1636.09 +1.2
Client Bundles (main, webpack, commons) Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
main-HASH.js gzip 6.63 kB 6.62 kB -8 B
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..c646.js gzip 10.7 kB 10.7 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57.2 kB 57.2 kB -8 B
Client Bundles (main, webpack, commons) Modern Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
main-HASH.module.js gzip 5.71 kB 5.71 kB -10 B
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.1 kB 7.1 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.7 kB 52.7 kB -10 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests Overall increase ⚠️
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
_buildManifest.js gzip 268 B 267 B -1 B
_buildManife..dule.js gzip 272 B 274 B ⚠️ +2 B
Overall change 540 B 541 B ⚠️ +1 B
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
index.html gzip 954 B 953 B -1 B
link.html gzip 960 B 960 B ✓
withRouter.html gzip 946 B 944 B -2 B
Overall change 2.86 kB 2.86 kB -3 B

Diffs

Diff for _buildManifest.js 
@@ -1,8 +1,8 @@
 self.__BUILD_MANIFEST = {
   "/": ["static\u002Fpages\u002Findex-f35cd1774d910f5523ed.js"],
-  "/_error": ["static\u002Fpages\u002F_error-f39e6723c6acde17325a.js"],
+  "/_error": ["static\u002Fpages\u002F_error-b5c3e8d3fd7cb18089e0.js"],
   "/hooks": ["static\u002Fpages\u002Fhooks-9e216cd51bf04b309e08.js"],
-  "/link": ["static\u002Fpages\u002Flink-d0cd3d2b80934d6c003a.js"],
+  "/link": ["static\u002Fpages\u002Flink-9cbc3acb75186d5885ae.js"],
   "/routerDirect": [
     "static\u002Fpages\u002FrouterDirect-b95d3f54c75949a43da6.js"
   ],
Diff for _buildManifest.module.js 
@@ -1,8 +1,8 @@
 self.__BUILD_MANIFEST = {
   "/": ["static\u002Fpages\u002Findex-da343bca3b67f1bcf42d.module.js"],
-  "/_error": ["static\u002Fpages\u002F_error-b3c4c3f8dbb1417657e6.module.js"],
+  "/_error": ["static\u002Fpages\u002F_error-b51f16b902f3e71973eb.module.js"],
   "/hooks": ["static\u002Fpages\u002Fhooks-dc8f274035a2839a1e61.module.js"],
-  "/link": ["static\u002Fpages\u002Flink-5a10d6c964f4c88363cd.module.js"],
+  "/link": ["static\u002Fpages\u002Flink-a90c99c9a9ddaa07df87.module.js"],
   "/routerDirect": [
     "static\u002Fpages\u002FrouterDirect-c62f258dff7fece0a732.module.js"
   ],
Diff for 19b7e98f51cc..73.module.js 
@@ -1931,7 +1931,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             };
       }
 
-      var RouterContext = _react.default.createContext(null);
+      var RouterContext = /*#__PURE__*/ _react.default.createContext(null);
 
       exports.RouterContext = RouterContext;
Diff for 19b7e98f51cc..d0645a966.js 
@@ -3184,7 +3184,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             };
       }
 
-      var RouterContext = _react["default"].createContext(null);
+      var RouterContext = /*#__PURE__*/ _react["default"].createContext(null);
 
       exports.RouterContext = RouterContext;
Diff for main-HASH.js 
@@ -178,7 +178,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
             };
       }
 
-      var HeadManagerContext = _react["default"].createContext({});
+      var HeadManagerContext = /*#__PURE__*/ _react["default"].createContext(
+        {}
+      );
 
       exports.HeadManagerContext = HeadManagerContext;
 
@@ -402,7 +404,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                     "?" +
                     (0, _querystring.stringify)(
                       (0, _extends2["default"])(
-                        (0, _extends2["default"])({}, router.query),
+                        {},
+                        router.query,
                         (0, _querystring.parse)(location.search.substr(1))
                       )
                     ),
@@ -724,13 +727,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
 
                       _context2.next = 14;
                       return renderError(
-                        (0, _extends2["default"])(
-                          (0, _extends2["default"])({}, renderingProps),
-                          {},
-                          {
-                            err: _context2.t0
-                          }
-                        )
+                        (0, _extends2["default"])({}, renderingProps, {
+                          err: _context2.t0
+                        })
                       );
 
                     case 14:
@@ -784,15 +783,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
               : (0, _utils.loadGetInitialProps)(App, appCtx)
           ).then(function(initProps) {
             return doRender(
-              (0, _extends2["default"])(
-                (0, _extends2["default"])({}, renderErrorProps),
-                {},
-                {
-                  err: err,
-                  Component: ErrorComponent,
-                  props: initProps
-                }
-              )
+              (0, _extends2["default"])({}, renderErrorProps, {
+                err: err,
+                Component: ErrorComponent,
+                props: initProps
+              })
             );
           });
         });
@@ -923,15 +918,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
 
       var wrapApp = function wrapApp(App) {
         return function(wrappedAppProps) {
-          var appProps = (0, _extends2["default"])(
-            (0, _extends2["default"])({}, wrappedAppProps),
-            {},
-            {
-              Component: CachedComponent,
-              err: hydrateErr,
-              router: router
-            }
-          );
+          var appProps = (0, _extends2["default"])({}, wrappedAppProps, {
+            Component: CachedComponent,
+            err: hydrateErr,
+            router: router
+          });
           return /*#__PURE__*/ _react["default"].createElement(
             AppContainer,
             null,
@@ -965,15 +956,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                       (err = _ref9.err);
                     Component = Component || lastAppProps.Component;
                     props = props || lastAppProps.props;
-                    appProps = (0, _extends2["default"])(
-                      (0, _extends2["default"])({}, props),
-                      {},
-                      {
-                        Component: Component,
-                        err: err,
-                        router: router
-                      }
-                    ); // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
+                    appProps = (0, _extends2["default"])({}, props, {
+                      Component: Component,
+                      err: err,
+                      router: router
+                    }); // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
 
                     lastAppProps = appProps;
                     renderPromise = new Promise(function(resolve, reject) {
Diff for main-HASH.module.js 
@@ -143,7 +143,7 @@
             };
       }
 
-      var HeadManagerContext = _react.default.createContext({});
+      var HeadManagerContext = /*#__PURE__*/ _react.default.createContext({});
 
       exports.HeadManagerContext = HeadManagerContext;
 
@@ -298,7 +298,8 @@
                 "?" +
                 (0, _querystring.stringify)(
                   (0, _extends2.default)(
-                    (0, _extends2.default)({}, router.query),
+                    {},
+                    router.query,
                     (0, _querystring.parse)(location.search.substr(1))
                   )
                 ),
@@ -481,13 +482,9 @@
           }
 
           await renderError(
-            (0, _extends2.default)(
-              (0, _extends2.default)({}, renderingProps),
-              {},
-              {
-                err: renderErr
-              }
-            )
+            (0, _extends2.default)({}, renderingProps, {
+              err: renderErr
+            })
           );
         }
       } // This method handles all runtime and debug errors.
@@ -529,15 +526,11 @@
               : (0, _utils.loadGetInitialProps)(App, appCtx)
           ).then(initProps =>
             doRender(
-              (0, _extends2.default)(
-                (0, _extends2.default)({}, renderErrorProps),
-                {},
-                {
-                  err,
-                  Component: ErrorComponent,
-                  props: initProps
-                }
-              )
+              (0, _extends2.default)({}, renderErrorProps, {
+                err,
+                Component: ErrorComponent,
+                props: initProps
+              })
             )
           );
         });
@@ -663,15 +656,11 @@
       }
 
       var wrapApp = App => wrappedAppProps => {
-        var appProps = (0, _extends2.default)(
-          (0, _extends2.default)({}, wrappedAppProps),
-          {},
-          {
-            Component: CachedComponent,
-            err: hydrateErr,
-            router
-          }
-        );
+        var appProps = (0, _extends2.default)({}, wrappedAppProps, {
+          Component: CachedComponent,
+          err: hydrateErr,
+          router
+        });
         return /*#__PURE__*/ _react.default.createElement(
           AppContainer,
           null,
@@ -683,15 +672,11 @@
         var { App, Component, props, err } = _ref6;
         Component = Component || lastAppProps.Component;
         props = props || lastAppProps.props;
-        var appProps = (0, _extends2.default)(
-          (0, _extends2.default)({}, props),
-          {},
-          {
-            Component,
-            err,
-            router
-          }
-        ); // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
+        var appProps = (0, _extends2.default)({}, props, {
+          Component,
+          err,
+          router
+        }); // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
 
         lastAppProps = appProps;
         var resolvePromise;
Diff for index.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-ebe998339a21eae32e6a.module.js"
+      href="/_next/static/runtime/main-ea214265174005734536.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6892bb0ce1e47d97f973.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.d781e3a644a6963c2aec.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/runtime/polyfills-fa968511391ff096b874.js"
     ></script>
     <script
-      src="/_next/static/runtime/main-df9bcf41d7b3b9849696.js"
+      src="/_next/static/runtime/main-0b118356c0a49b38623d.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/runtime/main-ebe998339a21eae32e6a.module.js"
+      src="/_next/static/runtime/main-ea214265174005734536.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.ee8f39bc6cdd0645a966.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.370c2450b7af34fa1fbb.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6892bb0ce1e47d97f973.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.d781e3a644a6963c2aec.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-ebe998339a21eae32e6a.module.js"
+      href="/_next/static/runtime/main-ea214265174005734536.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6892bb0ce1e47d97f973.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.d781e3a644a6963c2aec.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -36,7 +36,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/pages/link-5a10d6c964f4c88363cd.module.js"
+      href="/_next/static/pages/link-a90c99c9a9ddaa07df87.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -86,13 +86,13 @@
       src="/_next/static/runtime/polyfills-fa968511391ff096b874.js"
     ></script>
     <script
-      src="/_next/static/runtime/main-df9bcf41d7b3b9849696.js"
+      src="/_next/static/runtime/main-0b118356c0a49b38623d.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/runtime/main-ebe998339a21eae32e6a.module.js"
+      src="/_next/static/runtime/main-ea214265174005734536.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.ee8f39bc6cdd0645a966.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.370c2450b7af34fa1fbb.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6892bb0ce1e47d97f973.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.d781e3a644a6963c2aec.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -146,13 +146,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/pages/link-d0cd3d2b80934d6c003a.js"
+      src="/_next/static/pages/link-9cbc3acb75186d5885ae.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/pages/link-5a10d6c964f4c88363cd.module.js"
+      src="/_next/static/pages/link-a90c99c9a9ddaa07df87.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-ebe998339a21eae32e6a.module.js"
+      href="/_next/static/runtime/main-ea214265174005734536.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6892bb0ce1e47d97f973.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.d781e3a644a6963c2aec.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/runtime/polyfills-fa968511391ff096b874.js"
     ></script>
     <script
-      src="/_next/static/runtime/main-df9bcf41d7b3b9849696.js"
+      src="/_next/static/runtime/main-0b118356c0a49b38623d.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/runtime/main-ebe998339a21eae32e6a.module.js"
+      src="/_next/static/runtime/main-ea214265174005734536.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.ee8f39bc6cdd0645a966.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.370c2450b7af34fa1fbb.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.6892bb0ce1e47d97f973.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.d781e3a644a6963c2aec.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
buildDuration 13.9s 14.1s ⚠️ +234ms
nodeModulesSize 65.9 MB 65.1 MB -802 kB
Client Bundles (main, webpack, commons) Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
main-HASH.js gzip 6.63 kB 6.62 kB -8 B
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..c646.js gzip 10.7 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..78f2.js gzip N/A 10.7 kB N/A
Overall change 57.2 kB 57.2 kB -8 B
Client Bundles (main, webpack, commons) Modern Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
main-HASH.module.js gzip 5.71 kB 5.71 kB -10 B
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.1 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..dule.js gzip N/A 7.1 kB N/A
Overall change 52.7 kB 52.7 kB -10 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests Overall increase ⚠️
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
_buildManifest.js gzip 268 B 267 B -1 B
_buildManife..dule.js gzip 272 B 274 B ⚠️ +2 B
Overall change 540 B 541 B ⚠️ +1 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
_error.js 876 kB 877 kB ⚠️ +130 B
404.html 4.17 kB 4.17 kB ✓
hooks.html 3.79 kB 3.79 kB ✓
index.js 877 kB 877 kB ⚠️ +130 B
link.js 915 kB 915 kB ⚠️ +143 B
routerDirect.js 909 kB 909 kB ⚠️ +130 B
withRouter.js 909 kB 909 kB ⚠️ +130 B
Overall change 4.49 MB 4.49 MB ⚠️ +663 B
Commit: 76e06a7

@ijjk
Copy link
Member

ijjk commented Jul 8, 2020

Failing test suites

Commit: 808da4a

test/integration/styled-jsx-plugin/test/index.test.js

  • styled-jsx using in node_modules > production mode > should serve a page correctly
Expand output

● styled-jsx using in node_modules › production mode › should serve a page correctly

thrown: "Exceeded timeout of 60000 ms for a hook.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  25 | describe('styled-jsx using in node_modules', () => {
  26 |   describe('production mode', () => {
> 27 |     beforeAll(async () => {
     |     ^
  28 |       const output = await nextBuild(appDir, undefined, {
  29 |         stdout: true,
  30 |         stderr: true,

  at integration/styled-jsx-plugin/test/index.test.js:27:5
  at integration/styled-jsx-plugin/test/index.test.js:26:3
  at Object.<anonymous> (integration/styled-jsx-plugin/test/index.test.js:25:1)

● Test suite failed to run

TypeError: Cannot read property 'pid' of undefined

  271 | export async function killApp(instance) {
  272 |   await new Promise((resolve, reject) => {
> 273 |     treeKill(instance.pid, (err) => {
      |                       ^
  274 |       if (err) {
  275 |         if (
  276 |           process.platform === 'win32' &&

  at lib/next-test-utils.js:273:23
  at killApp (lib/next-test-utils.js:272:9)
  at integration/styled-jsx-plugin/test/index.test.js:39:20

timneutkens
timneutkens approved these changes Jul 8, 2020
View reviewed changes
Copy link
Member

@timneutkens timneutkens left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The change looks good, however based on the description in the blog/release notes the improvements are likely not as big as you're expecting given that components are generally used. This change mostly helps when tree shaking certain cases.

@ijjk
Copy link
Member

ijjk commented Jul 8, 2020

Failing test suites

Commit: 76e06a7

test/integration/styled-jsx-plugin/test/index.test.js

  • styled-jsx using in node_modules > production mode > should serve a page correctly
Expand output

● styled-jsx using in node_modules › production mode › should serve a page correctly

thrown: "Exceeded timeout of 60000 ms for a hook.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  25 | describe('styled-jsx using in node_modules', () => {
  26 |   describe('production mode', () => {
> 27 |     beforeAll(async () => {
     |     ^
  28 |       const output = await nextBuild(appDir, undefined, {
  29 |         stdout: true,
  30 |         stderr: true,

  at integration/styled-jsx-plugin/test/index.test.js:27:5
  at integration/styled-jsx-plugin/test/index.test.js:26:3
  at Object.<anonymous> (integration/styled-jsx-plugin/test/index.test.js:25:1)

● Test suite failed to run

TypeError: Cannot read property 'pid' of undefined

  271 | export async function killApp(instance) {
  272 |   await new Promise((resolve, reject) => {
> 273 |     treeKill(instance.pid, (err) => {
      |                       ^
  274 |       if (err) {
  275 |         if (
  276 |           process.platform === 'win32' &&

  at lib/next-test-utils.js:273:23
  at killApp (lib/next-test-utils.js:272:9)
  at integration/styled-jsx-plugin/test/index.test.js:39:20

timneutkens
timneutkens requested changes Jul 8, 2020
View reviewed changes
Copy link
Member

@timneutkens timneutkens left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like one of the styled-jsx tests is failing

@ijjk
Copy link
Member

ijjk commented Jul 9, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
buildDuration 12.9s 13.3s ⚠️ +444ms
nodeModulesSize 66.1 MB 65.3 MB -802 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.137 2.193 ⚠️ +0.06
/ avg req/sec 1169.68 1140.05 ⚠️ -29.63
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.489 1.465 -0.02
/error-in-render avg req/sec 1679.5 1705.95 +26.45
Client Bundles (main, webpack, commons) Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
main-HASH.js gzip 6.63 kB 6.62 kB -8 B
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..e4a8.js gzip 10.7 kB 10.7 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57.2 kB 57.2 kB -8 B
Client Bundles (main, webpack, commons) Modern Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
main-HASH.module.js gzip 5.72 kB 5.71 kB -10 B
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.1 kB 7.1 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.7 kB 52.7 kB -10 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests Overall increase ⚠️
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
_buildManifest.js gzip 268 B 267 B -1 B
_buildManife..dule.js gzip 272 B 274 B ⚠️ +2 B
Overall change 540 B 541 B ⚠️ +1 B
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
index.html gzip 953 B 952 B -1 B
link.html gzip 961 B 960 B -1 B
withRouter.html gzip 946 B 946 B ✓
Overall change 2.86 kB 2.86 kB -2 B

Diffs

Diff for _buildManifest.js 
@@ -1,8 +1,8 @@
 self.__BUILD_MANIFEST = {
   "/": ["static\u002Fpages\u002Findex-f35cd1774d910f5523ed.js"],
-  "/_error": ["static\u002Fpages\u002F_error-f39e6723c6acde17325a.js"],
+  "/_error": ["static\u002Fpages\u002F_error-b5c3e8d3fd7cb18089e0.js"],
   "/hooks": ["static\u002Fpages\u002Fhooks-9e216cd51bf04b309e08.js"],
-  "/link": ["static\u002Fpages\u002Flink-d0cd3d2b80934d6c003a.js"],
+  "/link": ["static\u002Fpages\u002Flink-9cbc3acb75186d5885ae.js"],
   "/routerDirect": [
     "static\u002Fpages\u002FrouterDirect-b95d3f54c75949a43da6.js"
   ],
Diff for _buildManifest.module.js 
@@ -1,8 +1,8 @@
 self.__BUILD_MANIFEST = {
   "/": ["static\u002Fpages\u002Findex-da343bca3b67f1bcf42d.module.js"],
-  "/_error": ["static\u002Fpages\u002F_error-b3c4c3f8dbb1417657e6.module.js"],
+  "/_error": ["static\u002Fpages\u002F_error-b51f16b902f3e71973eb.module.js"],
   "/hooks": ["static\u002Fpages\u002Fhooks-dc8f274035a2839a1e61.module.js"],
-  "/link": ["static\u002Fpages\u002Flink-5a10d6c964f4c88363cd.module.js"],
+  "/link": ["static\u002Fpages\u002Flink-a90c99c9a9ddaa07df87.module.js"],
   "/routerDirect": [
     "static\u002Fpages\u002FrouterDirect-c62f258dff7fece0a732.module.js"
   ],
Diff for 19b7e98f51cc..b697ae7df.js 
@@ -3188,7 +3188,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             };
       }
 
-      var RouterContext = _react["default"].createContext(null);
+      var RouterContext = /*#__PURE__*/ _react["default"].createContext(null);
 
       exports.RouterContext = RouterContext;
Diff for 19b7e98f51cc..de.module.js 
@@ -1935,7 +1935,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
             };
       }
 
-      var RouterContext = _react.default.createContext(null);
+      var RouterContext = /*#__PURE__*/ _react.default.createContext(null);
 
       exports.RouterContext = RouterContext;
Diff for main-HASH.js 
@@ -178,7 +178,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
             };
       }
 
-      var HeadManagerContext = _react["default"].createContext({});
+      var HeadManagerContext = /*#__PURE__*/ _react["default"].createContext(
+        {}
+      );
 
       exports.HeadManagerContext = HeadManagerContext;
 
@@ -402,7 +404,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                     "?" +
                     (0, _querystring.stringify)(
                       (0, _extends2["default"])(
-                        (0, _extends2["default"])({}, router.query),
+                        {},
+                        router.query,
                         (0, _querystring.parse)(location.search.substr(1))
                       )
                     ),
@@ -724,13 +727,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
 
                       _context2.next = 14;
                       return renderError(
-                        (0, _extends2["default"])(
-                          (0, _extends2["default"])({}, renderingProps),
-                          {},
-                          {
-                            err: _context2.t0
-                          }
-                        )
+                        (0, _extends2["default"])({}, renderingProps, {
+                          err: _context2.t0
+                        })
                       );
 
                     case 14:
@@ -784,15 +783,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
               : (0, _utils.loadGetInitialProps)(App, appCtx)
           ).then(function(initProps) {
             return doRender(
-              (0, _extends2["default"])(
-                (0, _extends2["default"])({}, renderErrorProps),
-                {},
-                {
-                  err: err,
-                  Component: ErrorComponent,
-                  props: initProps
-                }
-              )
+              (0, _extends2["default"])({}, renderErrorProps, {
+                err: err,
+                Component: ErrorComponent,
+                props: initProps
+              })
             );
           });
         });
@@ -923,15 +918,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
 
       var wrapApp = function wrapApp(App) {
         return function(wrappedAppProps) {
-          var appProps = (0, _extends2["default"])(
-            (0, _extends2["default"])({}, wrappedAppProps),
-            {},
-            {
-              Component: CachedComponent,
-              err: hydrateErr,
-              router: router
-            }
-          );
+          var appProps = (0, _extends2["default"])({}, wrappedAppProps, {
+            Component: CachedComponent,
+            err: hydrateErr,
+            router: router
+          });
           return /*#__PURE__*/ _react["default"].createElement(
             AppContainer,
             null,
@@ -965,15 +956,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                       (err = _ref9.err);
                     Component = Component || lastAppProps.Component;
                     props = props || lastAppProps.props;
-                    appProps = (0, _extends2["default"])(
-                      (0, _extends2["default"])({}, props),
-                      {},
-                      {
-                        Component: Component,
-                        err: err,
-                        router: router
-                      }
-                    ); // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
+                    appProps = (0, _extends2["default"])({}, props, {
+                      Component: Component,
+                      err: err,
+                      router: router
+                    }); // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
 
                     lastAppProps = appProps;
                     renderPromise = new Promise(function(resolve, reject) {
Diff for main-HASH.module.js 
@@ -143,7 +143,7 @@
             };
       }
 
-      var HeadManagerContext = _react.default.createContext({});
+      var HeadManagerContext = /*#__PURE__*/ _react.default.createContext({});
 
       exports.HeadManagerContext = HeadManagerContext;
 
@@ -298,7 +298,8 @@
                 "?" +
                 (0, _querystring.stringify)(
                   (0, _extends2.default)(
-                    (0, _extends2.default)({}, router.query),
+                    {},
+                    router.query,
                     (0, _querystring.parse)(location.search.substr(1))
                   )
                 ),
@@ -481,13 +482,9 @@
           }
 
           await renderError(
-            (0, _extends2.default)(
-              (0, _extends2.default)({}, renderingProps),
-              {},
-              {
-                err: renderErr
-              }
-            )
+            (0, _extends2.default)({}, renderingProps, {
+              err: renderErr
+            })
           );
         }
       } // This method handles all runtime and debug errors.
@@ -529,15 +526,11 @@
               : (0, _utils.loadGetInitialProps)(App, appCtx)
           ).then(initProps =>
             doRender(
-              (0, _extends2.default)(
-                (0, _extends2.default)({}, renderErrorProps),
-                {},
-                {
-                  err,
-                  Component: ErrorComponent,
-                  props: initProps
-                }
-              )
+              (0, _extends2.default)({}, renderErrorProps, {
+                err,
+                Component: ErrorComponent,
+                props: initProps
+              })
             )
           );
         });
@@ -663,15 +656,11 @@
       }
 
       var wrapApp = App => wrappedAppProps => {
-        var appProps = (0, _extends2.default)(
-          (0, _extends2.default)({}, wrappedAppProps),
-          {},
-          {
-            Component: CachedComponent,
-            err: hydrateErr,
-            router
-          }
-        );
+        var appProps = (0, _extends2.default)({}, wrappedAppProps, {
+          Component: CachedComponent,
+          err: hydrateErr,
+          router
+        });
         return /*#__PURE__*/ _react.default.createElement(
           AppContainer,
           null,
@@ -683,15 +672,11 @@
         var { App, Component, props, err } = _ref6;
         Component = Component || lastAppProps.Component;
         props = props || lastAppProps.props;
-        var appProps = (0, _extends2.default)(
-          (0, _extends2.default)({}, props),
-          {},
-          {
-            Component,
-            err,
-            router
-          }
-        ); // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
+        var appProps = (0, _extends2.default)({}, props, {
+          Component,
+          err,
+          router
+        }); // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
 
         lastAppProps = appProps;
         var resolvePromise;
Diff for index.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-639f6d193fe00fe5342a.module.js"
+      href="/_next/static/runtime/main-62cd3d230c06dd6eb72b.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.81cf701752e54f994ede.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.274d8df8fdbb52f9d68e.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/runtime/polyfills-fa968511391ff096b874.js"
     ></script>
     <script
-      src="/_next/static/runtime/main-ed9934cf83b93fdd1fc9.js"
+      src="/_next/static/runtime/main-85967282ed7bfa3851db.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/runtime/main-639f6d193fe00fe5342a.module.js"
+      src="/_next/static/runtime/main-62cd3d230c06dd6eb72b.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.57653bae0c6b697ae7df.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.5cef2f944823653fcbba.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.81cf701752e54f994ede.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.274d8df8fdbb52f9d68e.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for link.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-639f6d193fe00fe5342a.module.js"
+      href="/_next/static/runtime/main-62cd3d230c06dd6eb72b.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.81cf701752e54f994ede.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.274d8df8fdbb52f9d68e.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -36,7 +36,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/pages/link-5a10d6c964f4c88363cd.module.js"
+      href="/_next/static/pages/link-a90c99c9a9ddaa07df87.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -86,13 +86,13 @@
       src="/_next/static/runtime/polyfills-fa968511391ff096b874.js"
     ></script>
     <script
-      src="/_next/static/runtime/main-ed9934cf83b93fdd1fc9.js"
+      src="/_next/static/runtime/main-85967282ed7bfa3851db.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/runtime/main-639f6d193fe00fe5342a.module.js"
+      src="/_next/static/runtime/main-62cd3d230c06dd6eb72b.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.57653bae0c6b697ae7df.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.5cef2f944823653fcbba.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.81cf701752e54f994ede.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.274d8df8fdbb52f9d68e.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -146,13 +146,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/pages/link-d0cd3d2b80934d6c003a.js"
+      src="/_next/static/pages/link-9cbc3acb75186d5885ae.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/pages/link-5a10d6c964f4c88363cd.module.js"
+      src="/_next/static/pages/link-a90c99c9a9ddaa07df87.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Diff for withRouter.html 
@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/runtime/main-639f6d193fe00fe5342a.module.js"
+      href="/_next/static/runtime/main-62cd3d230c06dd6eb72b.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.81cf701752e54f994ede.module.js"
+      href="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.274d8df8fdbb52f9d68e.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/runtime/polyfills-fa968511391ff096b874.js"
     ></script>
     <script
-      src="/_next/static/runtime/main-ed9934cf83b93fdd1fc9.js"
+      src="/_next/static/runtime/main-85967282ed7bfa3851db.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/runtime/main-639f6d193fe00fe5342a.module.js"
+      src="/_next/static/runtime/main-62cd3d230c06dd6eb72b.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.57653bae0c6b697ae7df.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.5cef2f944823653fcbba.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.81cf701752e54f994ede.module.js"
+      src="/_next/static/chunks/19b7e98f51cc0d86c45d01159bbbfb942bfe49b8.274d8df8fdbb52f9d68e.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
Serverless Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
buildDuration 13.8s 14.1s ⚠️ +243ms
nodeModulesSize 66.1 MB 65.3 MB -802 kB
Client Bundles (main, webpack, commons) Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
main-HASH.js gzip 6.63 kB 6.62 kB -8 B
webpack-HASH.js gzip 751 B 751 B ✓
19b7e98f51cc..e4a8.js gzip 10.7 kB N/A N/A
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..63df.js gzip N/A 10.7 kB N/A
Overall change 57.2 kB 57.2 kB -8 B
Client Bundles (main, webpack, commons) Modern Overall decrease ✓
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
main-HASH.module.js gzip 5.72 kB 5.71 kB -10 B
webpack-HASH..dule.js gzip 751 B 751 B ✓
19b7e98f51cc..dule.js gzip 7.1 kB N/A N/A
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
19b7e98f51cc..dule.js gzip N/A 7.1 kB N/A
Overall change 52.7 kB 52.7 kB -10 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB ✓
Overall change 26.4 kB 26.4 kB ✓
Client Build Manifests Overall increase ⚠️
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
_buildManifest.js gzip 268 B 267 B -1 B
_buildManife..dule.js gzip 272 B 274 B ⚠️ +2 B
Overall change 540 B 541 B ⚠️ +1 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary Bjodol/next.js babel-upgrade-7.10.4 Change
_error.js 876 kB 877 kB ⚠️ +130 B
404.html 4.17 kB 4.17 kB ✓
hooks.html 3.79 kB 3.79 kB ✓
index.js 877 kB 877 kB ⚠️ +130 B
link.js 916 kB 916 kB ⚠️ +143 B
routerDirect.js 909 kB 910 kB ⚠️ +130 B
withRouter.js 910 kB 910 kB ⚠️ +130 B
Overall change 4.5 MB 4.5 MB ⚠️ +663 B
Commit: b5ef706

@ijjk
Copy link
Member

ijjk commented Jul 9, 2020

Failing test suites

Commit: b5ef706

test/integration/styled-jsx-plugin/test/index.test.js

  • styled-jsx using in node_modules > production mode > should serve a page correctly
Expand output

● styled-jsx using in node_modules › production mode › should serve a page correctly

thrown: "Exceeded timeout of 60000 ms for a hook.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  25 | describe('styled-jsx using in node_modules', () => {
  26 |   describe('production mode', () => {
> 27 |     beforeAll(async () => {
     |     ^
  28 |       const output = await nextBuild(appDir, undefined, {
  29 |         stdout: true,
  30 |         stderr: true,

  at integration/styled-jsx-plugin/test/index.test.js:27:5
  at integration/styled-jsx-plugin/test/index.test.js:26:3
  at Object.<anonymous> (integration/styled-jsx-plugin/test/index.test.js:25:1)

● Test suite failed to run

TypeError: Cannot read property 'pid' of undefined

  271 | export async function killApp(instance) {
  272 |   await new Promise((resolve, reject) => {
> 273 |     treeKill(instance.pid, (err) => {
      |                       ^
  274 |       if (err) {
  275 |         if (
  276 |           process.platform === 'win32' &&

  at lib/next-test-utils.js:273:23
  at killApp (lib/next-test-utils.js:272:9)
  at integration/styled-jsx-plugin/test/index.test.js:39:20

@Bjodol
Copy link
Author

Bjodol commented Jul 9, 2020

Been doing a some digging today and the test issue has already occurred once before it seems, where the result has been that @StarpTech has submitted a pull request to postcss-load-plugins, which now has been two months stale. The proposed changes would hopefully result in code that is easier to follow, but I still think that it would requires some change in styled-jsx-plugin-postcss to get it working all the way through.

I am still uncertain of why the bug happens in the first place. I tried running the styledstyled-jsx-plugin-postcss through the next babel preset with the different versions of babel and they both came out identical from what I could see.

If anyone has some pointers on where to look next (pun-intended) I'll see if I can find the time :)

Pedja21
Pedja21 previously approved these changes Jul 19, 2020
View reviewed changes
@Timer Timer mentioned this pull request Jul 22, 2020
Closed
@lfades
Copy link
Member

lfades commented Aug 28, 2020

Hi @Bjodol are you still working on this PR? There are some conflicts but next@canary hasn't updated yet to babel 7.10. You can run the styled-jsx tests locally and see why they broke:

yarn testonly --testPathPattern=integration/styled-jsx-plugin

See contributing.md for more detailed steps.

@Timer
Copy link
Member

Timer commented Aug 30, 2020

Closing this PR as stale.

@Timer Timer closed this Aug 30, 2020
@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@timneutkens timneutkens timneutkens requested changes

@ijjk ijjk Awaiting requested review from ijjk

@lfades lfades Awaiting requested review from lfades

@Timer Timer Awaiting requested review from Timer

+1 more reviewer

@Pedja21 Pedja21 Pedja21 left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

type: next

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@Bjodol @ijjk @lfades @Timer @timneutkens @Pedja21