Skip to content
New issue

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

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

Enable externalHelpers swc option #37150

Merged
merged 4 commits into from
Jun 7, 2022
Merged

Conversation

ijjk
Copy link
Member

@ijjk ijjk commented May 24, 2022

This enables the externalHelpers config for swc which should prevent helpers from duplicated.

x-ref: #37148
x-ref: #37142
x-ref: #30806

Bug

  • Related issues linked using fixes #number
  • Integration tests added
  • Errors have helpful link attached, see contributing.md

Feature

  • Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
  • Related issues linked using fixes #number
  • Integration tests added
  • Documentation added
  • Telemetry added. In case of a feature if it's used or not.
  • Errors have helpful link attached, see contributing.md

Documentation / Examples

  • Make sure the linting passes by running yarn lint

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels May 24, 2022
@ijjk
Copy link
Member Author

ijjk commented May 24, 2022

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary ijjk/next.js enable/swc-external-helpers Change
buildDuration 17.8s 17.8s ⚠️ +48ms
buildDurationCached 6.6s 6.6s ⚠️ +75ms
nodeModulesSize 1.85 GB 1.85 GB ⚠️ +564 kB
Page Load Tests Overall increase ✓
vercel/next.js canary ijjk/next.js enable/swc-external-helpers Change
/ failed reqs 0 0
/ total time (seconds) 3.729 3.828 ⚠️ +0.1
/ avg req/sec 670.5 653.03 ⚠️ -17.47
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.294 1.262 -0.03
/error-in-render avg req/sec 1931.39 1981.38 +49.99
Client Bundles (main, webpack) Overall decrease ✓
vercel/next.js canary ijjk/next.js enable/swc-external-helpers Change
437.HASH.js gzip 179 B 179 B
framework-HASH.js gzip 42 kB 42 kB
main-HASH.js gzip 29.9 kB 28.6 kB -1.28 kB
webpack-HASH.js gzip 1.53 kB 1.54 kB ⚠️ +4 B
Overall change 73.7 kB 72.4 kB -1.28 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary ijjk/next.js enable/swc-external-helpers Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall decrease ✓
vercel/next.js canary ijjk/next.js enable/swc-external-helpers Change
_app-HASH.js gzip 1.37 kB 825 B -541 B
_error-HASH.js gzip 194 B 194 B
amp-HASH.js gzip 495 B 496 B ⚠️ +1 B
css-HASH.js gzip 328 B 327 B -1 B
dynamic-HASH.js gzip 2.7 kB 2.39 kB -313 B
head-HASH.js gzip 359 B 355 B -4 B
hooks-HASH.js gzip 920 B 418 B -502 B
image-HASH.js gzip 5.75 kB 5.24 kB -502 B
index-HASH.js gzip 263 B 264 B ⚠️ +1 B
link-HASH.js gzip 2.85 kB 2.4 kB -446 B
routerDirect..HASH.js gzip 322 B 321 B -1 B
script-HASH.js gzip 392 B 390 B -2 B
withRouter-HASH.js gzip 320 B 318 B -2 B
85e02e95b279..7e3.css gzip 107 B 107 B
Overall change 16.4 kB 14.1 kB -2.31 kB
Client Build Manifests Overall increase ⚠️
vercel/next.js canary ijjk/next.js enable/swc-external-helpers 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 ijjk/next.js enable/swc-external-helpers Change
index.html gzip 534 B 532 B -2 B
link.html gzip 547 B 546 B -1 B
withRouter.html gzip 527 B 527 B
Overall change 1.61 kB 1.6 kB -3 B

Diffs

Diff for _buildManifest.js
@@ -1,25 +1,25 @@
 self.__BUILD_MANIFEST = {
   __rewrites: { beforeFiles: [], afterFiles: [], fallback: [] },
-  "/": ["static\u002Fchunks\u002Fpages\u002Findex-5d085461d4b7e1ee.js"],
-  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-48e41d26ff0101f8.js"],
-  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-6515d1b91fe9c7da.js"],
+  "/": ["static\u002Fchunks\u002Fpages\u002Findex-71b39a0d29d24c94.js"],
+  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-f7a25bc135f661fc.js"],
+  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-7e272727af269b98.js"],
   "/css": [
     "static\u002Fcss\u002F94fdbc56eafa2039.css",
-    "static\u002Fchunks\u002Fpages\u002Fcss-6d59dba2fd31bfed.js"
+    "static\u002Fchunks\u002Fpages\u002Fcss-a95e3bc2c5ca8245.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-22ab8fbf7e5acbc7.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-103078cf435b98ee.js"
   ],
-  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-6ece0649d14938b8.js"],
-  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-e3382ebb932b5bfb.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-684d6e08536e28fe.js"],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-04612f6fd262d0f0.js"],
+  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-e2b7857f2aa86120.js"],
+  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-3fb5c5a851c7f496.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-bc17a83dd826c89a.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-05c5e849ee769f58.js"],
   "/routerDirect": [
-    "static\u002Fchunks\u002Fpages\u002FrouterDirect-9669d5861da5e10b.js"
+    "static\u002Fchunks\u002Fpages\u002FrouterDirect-c2408dd9a1984376.js"
   ],
-  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-c439c95569fb9033.js"],
+  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-f309dfc4eea310f4.js"],
   "/withRouter": [
-    "static\u002Fchunks\u002Fpages\u002FwithRouter-8b03818d0ed540a0.js"
+    "static\u002Fchunks\u002Fpages\u002FwithRouter-fb06f1f34bce84ca.js"
   ],
   sortedPages: [
     "\u002F",
Diff for _app-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [888],
   {
-    /***/ 3479: /***/ function(
+    /***/ 122: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_app",
         function() {
-          return __webpack_require__(3653);
+          return __webpack_require__(539);
         }
       ]);
       if (false) {
@@ -18,124 +18,20 @@
       /***/
     },
 
-    /***/ 3653: /***/ function(
+    /***/ 539: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
     ) {
       "use strict";
 
-      var _runtimeJs = _interopRequireDefault(__webpack_require__(739));
-      function _assertThisInitialized(self) {
-        if (self === void 0) {
-          throw new ReferenceError(
-            "this hasn't been initialised - super() hasn't been called"
-          );
-        }
-        return self;
-      }
-      function _classCallCheck(instance, Constructor) {
-        if (!(instance instanceof Constructor)) {
-          throw new TypeError("Cannot call a class as a function");
-        }
-      }
-      function _defineProperties(target, props) {
-        for (var i = 0; i < props.length; i++) {
-          var descriptor = props[i];
-          descriptor.enumerable = descriptor.enumerable || false;
-          descriptor.configurable = true;
-          if ("value" in descriptor) descriptor.writable = true;
-          Object.defineProperty(target, descriptor.key, descriptor);
-        }
-      }
-      function _createClass(Constructor, protoProps, staticProps) {
-        if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-        if (staticProps) _defineProperties(Constructor, staticProps);
-        return Constructor;
-      }
-      function _getPrototypeOf(o1) {
-        _getPrototypeOf = Object.setPrototypeOf
-          ? Object.getPrototypeOf
-          : function _getPrototypeOf(o) {
-              return o.__proto__ || Object.getPrototypeOf(o);
-            };
-        return _getPrototypeOf(o1);
-      }
-      function _inherits(subClass, superClass) {
-        if (typeof superClass !== "function" && superClass !== null) {
-          throw new TypeError(
-            "Super expression must either be null or a function"
-          );
-        }
-        subClass.prototype = Object.create(superClass && superClass.prototype, {
-          constructor: {
-            value: subClass,
-            writable: true,
-            configurable: true
-          }
-        });
-        if (superClass) _setPrototypeOf(subClass, superClass);
-      }
-      function _interopRequireDefault(obj) {
-        return obj && obj.__esModule
-          ? obj
-          : {
-              default: obj
-            };
-      }
-      function _possibleConstructorReturn(self, call) {
-        if (
-          call &&
-          (_typeof(call) === "object" || typeof call === "function")
-        ) {
-          return call;
-        }
-        return _assertThisInitialized(self);
-      }
-      function _setPrototypeOf(o2, p1) {
-        _setPrototypeOf =
-          Object.setPrototypeOf ||
-          function _setPrototypeOf(o, p) {
-            o.__proto__ = p;
-            return o;
-          };
-        return _setPrototypeOf(o2, p1);
-      }
-      var _typeof = function(obj) {
-        "@swc/helpers - typeof";
-        return obj &&
-          typeof Symbol !== "undefined" &&
-          obj.constructor === Symbol
-          ? "symbol"
-          : typeof obj;
-      };
-      function _isNativeReflectConstruct() {
-        if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-        if (Reflect.construct.sham) return false;
-        if (typeof Proxy === "function") return true;
-        try {
-          Boolean.prototype.valueOf.call(
-            Reflect.construct(Boolean, [], function() {})
-          );
-          return true;
-        } catch (e) {
-          return false;
-        }
-      }
-      function _createSuper(Derived) {
-        var hasNativeReflectConstruct = _isNativeReflectConstruct();
-        return function _createSuperInternal() {
-          var Super = _getPrototypeOf(Derived),
-            result;
-          if (hasNativeReflectConstruct) {
-            var NewTarget = _getPrototypeOf(this).constructor;
-            result = Reflect.construct(Super, arguments, NewTarget);
-          } else {
-            result = Super.apply(this, arguments);
-          }
-          return _possibleConstructorReturn(this, result);
-        };
-      }
+      var _class_call_check = __webpack_require__(6185) /* ["default"] */.Z;
+      var _create_class = __webpack_require__(2008) /* ["default"] */.Z;
+      var _inherits = __webpack_require__(9544) /* ["default"] */.Z;
+      var _interop_require_default = __webpack_require__(4974) /* ["default"] */
+        .Z;
+      var _create_super = __webpack_require__(3017) /* ["default"] */.Z;
+      var _runtimeJs = _interop_require_default(__webpack_require__(3994));
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
@@ -152,8 +48,8 @@
         }
       });
       exports["default"] = void 0;
-      var _react = _interopRequireDefault1(__webpack_require__(9496));
-      var _utils = __webpack_require__(8030);
+      var _react = _interopRequireDefault(__webpack_require__(9496));
+      var _utils = __webpack_require__(9089);
       function asyncGeneratorStep(
         gen,
         resolve,
@@ -208,7 +104,7 @@
           });
         };
       }
-      function _interopRequireDefault1(obj) {
+      function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
           : {
@@ -248,12 +144,12 @@
       }
       var App = /*#__PURE__*/ (function(_Component) {
         _inherits(App, _Component);
-        var _super = _createSuper(App);
+        var _super = _create_super(App);
         function App() {
-          _classCallCheck(this, App);
+          _class_call_check(this, App);
           return _super.apply(this, arguments);
         }
-        _createClass(App, [
+        _create_class(App, [
           {
             key: "render",
             value: function render() {
@@ -282,7 +178,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 179], function() {
-      return __webpack_exec__(3479), __webpack_exec__(7465);
+      return __webpack_exec__(122), __webpack_exec__(1905);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for _error-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [820],
   {
-    /***/ 2929: /***/ function(
+    /***/ 3560: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_error",
         function() {
-          return __webpack_require__(5590);
+          return __webpack_require__(9733);
         }
       ]);
       if (false) {
@@ -24,7 +24,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function() {
-      return __webpack_exec__(2929);
+      return __webpack_exec__(3560);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for amp-HASH.js
@@ -1,17 +1,17 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [216],
   {
-    /***/ 94: /***/ function(
+    /***/ 7941: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(4634);
+      module.exports = __webpack_require__(79);
 
       /***/
     },
 
-    /***/ 9028: /***/ function(
+    /***/ 8958: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -19,7 +19,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/amp",
         function() {
-          return __webpack_require__(4628);
+          return __webpack_require__(6534);
         }
       ]);
       if (false) {
@@ -28,7 +28,7 @@
       /***/
     },
 
-    /***/ 4634: /***/ function(module, exports, __webpack_require__) {
+    /***/ 79: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -36,8 +36,8 @@
       });
       exports.useAmp = useAmp;
       var _react = _interopRequireDefault(__webpack_require__(9496));
-      var _ampContext = __webpack_require__(2054);
-      var _ampMode = __webpack_require__(1122);
+      var _ampContext = __webpack_require__(3131);
+      var _ampMode = __webpack_require__(868);
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -66,7 +66,7 @@
       /***/
     },
 
-    /***/ 4628: /***/ function(
+    /***/ 6534: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -83,7 +83,7 @@
         /* harmony export */
       });
       /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        94
+        7941
       );
       /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/ __webpack_require__.n(
         next_amp__WEBPACK_IMPORTED_MODULE_0__
@@ -107,7 +107,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function() {
-      return __webpack_exec__(9028);
+      return __webpack_exec__(8958);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for css-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [706],
   {
-    /***/ 8281: /***/ function(
+    /***/ 9557: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/css",
         function() {
-          return __webpack_require__(1949);
+          return __webpack_require__(4173);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 1949: /***/ function(
+    /***/ 4173: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -29,7 +29,7 @@
         4637
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        1099
+        2467
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         _css_module_css__WEBPACK_IMPORTED_MODULE_1__
@@ -48,7 +48,7 @@
       /***/
     },
 
-    /***/ 1099: /***/ function(module) {
+    /***/ 2467: /***/ function(module) {
       // extracted by mini-css-extract-plugin
       module.exports = { helloWorld: "css_helloWorld__qqNwY" };
 
@@ -61,7 +61,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(8281);
+      return __webpack_exec__(9557);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for dynamic-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [739],
   {
-    /***/ 2744: /***/ function(
+    /***/ 5695: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/dynamic",
         function() {
-          return __webpack_require__(1697);
+          return __webpack_require__(7800);
         }
       ]);
       if (false) {
@@ -18,57 +18,18 @@
       /***/
     },
 
-    /***/ 1926: /***/ function(module, exports, __webpack_require__) {
+    /***/ 7164: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
-      function _defineProperty(obj, key, value) {
-        if (key in obj) {
-          Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-          });
-        } else {
-          obj[key] = value;
-        }
-        return obj;
-      }
-      function _instanceof(left, right) {
-        if (
-          right != null &&
-          typeof Symbol !== "undefined" &&
-          right[Symbol.hasInstance]
-        ) {
-          return !!right[Symbol.hasInstance](left);
-        } else {
-          return left instanceof right;
-        }
-      }
-      function _objectSpread(target) {
-        for (var i = 1; i < arguments.length; i++) {
-          var source = arguments[i] != null ? arguments[i] : {};
-          var ownKeys = Object.keys(source);
-          if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(
-              Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-              })
-            );
-          }
-          ownKeys.forEach(function(key) {
-            _defineProperty(target, key, source[key]);
-          });
-        }
-        return target;
-      }
+      var _instanceof = __webpack_require__(6326) /* ["default"] */.Z;
+      var _object_spread = __webpack_require__(1009) /* ["default"] */.Z;
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
       exports["default"] = dynamic;
       exports.noSSR = noSSR;
       var _react = _interopRequireDefault(__webpack_require__(9496));
-      var _loadable = _interopRequireDefault(__webpack_require__(4596));
+      var _loadable = _interopRequireDefault(__webpack_require__(4398));
       function dynamic(dynamicOptions, options) {
         var loadableFn = _loadable.default;
         var loadableOptions = {
@@ -96,10 +57,10 @@
           loadableOptions.loader = dynamicOptions;
           // Support for having first argument being options, eg: dynamic({loader: import('../hello-world')})
         } else if (typeof dynamicOptions === "object") {
-          loadableOptions = _objectSpread({}, loadableOptions, dynamicOptions);
+          loadableOptions = _object_spread({}, loadableOptions, dynamicOptions);
         }
         // Support for passing options, eg: dynamic(import('../hello-world'), {loading: () => <p>Loading something</p>})
-        loadableOptions = _objectSpread({}, loadableOptions, options);
+        loadableOptions = _object_spread({}, loadableOptions, options);
         // Error if Fizz rendering is not enabled and `suspense` option is set to true
         if (true && loadableOptions.suspense) {
           throw new Error(
@@ -108,7 +69,7 @@
         }
         // coming from build/babel/plugins/react-loadable-plugin.js
         if (loadableOptions.loadableGenerated) {
-          loadableOptions = _objectSpread(
+          loadableOptions = _object_spread(
             {},
             loadableOptions,
             loadableOptions.loadableGenerated
@@ -171,7 +132,7 @@
       /***/
     },
 
-    /***/ 7063: /***/ function(
+    /***/ 7484: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -198,68 +159,22 @@
       /***/
     },
 
-    /***/ 4596: /***/ function(
+    /***/ 4398: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
     ) {
       "use strict";
 
-      function _classCallCheck(instance, Constructor) {
-        if (!(instance instanceof Constructor)) {
-          throw new TypeError("Cannot call a class as a function");
-        }
-      }
-      function _defineProperties(target, props) {
-        for (var i = 0; i < props.length; i++) {
-          var descriptor = props[i];
-          descriptor.enumerable = descriptor.enumerable || false;
-          descriptor.configurable = true;
-          if ("value" in descriptor) descriptor.writable = true;
-          Object.defineProperty(target, descriptor.key, descriptor);
-        }
-      }
-      function _createClass(Constructor, protoProps, staticProps) {
-        if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-        if (staticProps) _defineProperties(Constructor, staticProps);
-        return Constructor;
-      }
-      function _defineProperty(obj, key, value) {
-        if (key in obj) {
-          Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-          });
-        } else {
-          obj[key] = value;
-        }
-        return obj;
-      }
-      function _objectSpread(target) {
-        for (var i = 1; i < arguments.length; i++) {
-          var source = arguments[i] != null ? arguments[i] : {};
-          var ownKeys = Object.keys(source);
-          if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(
-              Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-              })
-            );
-          }
-          ownKeys.forEach(function(key) {
-            _defineProperty(target, key, source[key]);
-          });
-        }
-        return target;
-      }
+      var _class_call_check = __webpack_require__(6185) /* ["default"] */.Z;
+      var _create_class = __webpack_require__(2008) /* ["default"] */.Z;
+      var _object_spread = __webpack_require__(1009) /* ["default"] */.Z;
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
       exports["default"] = void 0;
       var _react = _interopRequireDefault(__webpack_require__(9496));
-      var _loadableContext = __webpack_require__(7063);
+      var _loadableContext = __webpack_require__(7484);
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -361,7 +276,7 @@
           useLoadableModule();
           return _react.default.createElement(
             opts.lazy,
-            _objectSpread({}, props, {
+            _object_spread({}, props, {
               ref: ref
             })
           );
@@ -435,7 +350,7 @@
       }
       var LoadableSubscription = /*#__PURE__*/ (function() {
         function LoadableSubscription(loadFn, opts) {
-          _classCallCheck(this, LoadableSubscription);
+          _class_call_check(this, LoadableSubscription);
           this._loadFn = loadFn;
           this._opts = opts;
           this._callbacks = new Set();
@@ -443,7 +358,7 @@
           this._timeout = null;
           this.retry();
         }
-        _createClass(LoadableSubscription, [
+        _create_class(LoadableSubscription, [
           {
             key: "promise",
             value: function promise() {
@@ -500,7 +415,7 @@
           {
             key: "_update",
             value: function _update(partial) {
-              this._state = _objectSpread(
+              this._state = _object_spread(
                 {},
                 this._state,
                 {
@@ -582,7 +497,7 @@
       /***/
     },
 
-    /***/ 1697: /***/ function(
+    /***/ 7800: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -599,7 +514,7 @@
         4637
       );
       /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        1605
+        2123
       );
       /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_dynamic__WEBPACK_IMPORTED_MODULE_1__
@@ -608,13 +523,13 @@
       var DynamicHello = next_dynamic__WEBPACK_IMPORTED_MODULE_1___default()(
         function() {
           return __webpack_require__
-            .e(/* import() */ 437)
-            .then(__webpack_require__.bind(__webpack_require__, 7437));
+            .e(/* import() */ 181)
+            .then(__webpack_require__.bind(__webpack_require__, 1181));
         },
         {
           loadableGenerated: {
             webpack: function() {
-              return [/*require.resolve*/ 7437];
+              return [/*require.resolve*/ 1181];
             }
           }
         }
@@ -644,12 +559,12 @@
       /***/
     },
 
-    /***/ 1605: /***/ function(
+    /***/ 2123: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(1926);
+      module.exports = __webpack_require__(7164);
 
       /***/
     },
@@ -751,7 +666,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(2744);
+      return __webpack_exec__(5695);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for head-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [645],
   {
-    /***/ 4337: /***/ function(
+    /***/ 7148: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/head",
         function() {
-          return __webpack_require__(848);
+          return __webpack_require__(6179);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 848: /***/ function(
+    /***/ 6179: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -35,7 +35,7 @@
         4637
       );
       /* harmony import */ var next_head__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        8915
+        4616
       );
       /* harmony import */ var next_head__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_head__WEBPACK_IMPORTED_MODULE_1__
@@ -71,12 +71,12 @@
       /***/
     },
 
-    /***/ 8915: /***/ function(
+    /***/ 4616: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(4828);
+      module.exports = __webpack_require__(5222);
 
       /***/
     }
@@ -87,7 +87,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(4337);
+      return __webpack_exec__(7148);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for hooks-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [757],
   {
-    /***/ 4853: /***/ function(
+    /***/ 3515: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/hooks",
         function() {
-          return __webpack_require__(7084);
+          return __webpack_require__(856);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 7084: /***/ function(
+    /***/ 856: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -31,76 +31,19 @@
         }
         /* harmony export */
       });
+      /* harmony import */ var _swc_helpers_lib_sliced_to_array_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(
+        7523
+      );
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
         4637
       );
       /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
         9496
       );
-      function _arrayLikeToArray(arr, len) {
-        if (len == null || len > arr.length) len = arr.length;
-        for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-        return arr2;
-      }
-      function _arrayWithHoles(arr) {
-        if (Array.isArray(arr)) return arr;
-      }
-      function _iterableToArrayLimit(arr, i) {
-        var _i =
-          arr == null
-            ? null
-            : (typeof Symbol !== "undefined" && arr[Symbol.iterator]) ||
-              arr["@@iterator"];
-        if (_i == null) return;
-        var _arr = [];
-        var _n = true;
-        var _d = false;
-        var _s, _e;
-        try {
-          for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-          }
-        } catch (err) {
-          _d = true;
-          _e = err;
-        } finally {
-          try {
-            if (!_n && _i["return"] != null) _i["return"]();
-          } finally {
-            if (_d) throw _e;
-          }
-        }
-        return _arr;
-      }
-      function _nonIterableRest() {
-        throw new TypeError(
-          "Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."
-        );
-      }
-      function _slicedToArray(arr, i) {
-        return (
-          _arrayWithHoles(arr) ||
-          _iterableToArrayLimit(arr, i) ||
-          _unsupportedIterableToArray(arr, i) ||
-          _nonIterableRest()
-        );
-      }
-      function _unsupportedIterableToArray(o, minLen) {
-        if (!o) return;
-        if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-        var n = Object.prototype.toString.call(o).slice(8, -1);
-        if (n === "Object" && o.constructor) n = o.constructor.name;
-        if (n === "Map" || n === "Set") return Array.from(n);
-        if (
-          n === "Arguments" ||
-          /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)
-        )
-          return _arrayLikeToArray(o, minLen);
-      }
 
       /* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__() {
-        var ref = _slicedToArray(
+        var ref = (0,
+          _swc_helpers_lib_sliced_to_array_js__WEBPACK_IMPORTED_MODULE_2__ /* ["default"] */.Z)(
             react__WEBPACK_IMPORTED_MODULE_1__.useState(0),
             2
           ),
@@ -158,7 +101,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(4853);
+      return __webpack_exec__(3515);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for image-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [358],
   {
-    /***/ 7570: /***/ function(
+    /***/ 1487: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function() {
-          return __webpack_require__(3918);
+          return __webpack_require__(2330);
         }
       ]);
       if (false) {
@@ -18,117 +18,23 @@
       /***/
     },
 
-    /***/ 2185: /***/ function(module, exports, __webpack_require__) {
+    /***/ 5239: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
-      function _arrayLikeToArray(arr, len) {
-        if (len == null || len > arr.length) len = arr.length;
-        for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-        return arr2;
-      }
-      function _arrayWithHoles(arr) {
-        if (Array.isArray(arr)) return arr;
-      }
-      function _arrayWithoutHoles(arr) {
-        if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-      }
-      function _defineProperty(obj, key, value) {
-        if (key in obj) {
-          Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-          });
-        } else {
-          obj[key] = value;
-        }
-        return obj;
-      }
-      function _iterableToArray(iter) {
-        if (
-          (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null) ||
-          iter["@@iterator"] != null
-        )
-          return Array.from(iter);
-      }
-      function _iterableToArrayLimit(arr, i) {
-        var _i =
-          arr == null
-            ? null
-            : (typeof Symbol !== "undefined" && arr[Symbol.iterator]) ||
-              arr["@@iterator"];
-        if (_i == null) return;
-        var _arr = [];
-        var _n = true;
-        var _d = false;
-        var _s, _e;
-        try {
-          for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-          }
-        } catch (err) {
-          _d = true;
-          _e = err;
-        } finally {
-          try {
-            if (!_n && _i["return"] != null) _i["return"]();
-          } finally {
-            if (_d) throw _e;
-          }
-        }
-        return _arr;
-      }
-      function _nonIterableRest() {
-        throw new TypeError(
-          "Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."
-        );
-      }
-      function _nonIterableSpread() {
-        throw new TypeError(
-          "Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."
-        );
-      }
-      function _slicedToArray(arr, i) {
-        return (
-          _arrayWithHoles(arr) ||
-          _iterableToArrayLimit(arr, i) ||
-          _unsupportedIterableToArray(arr, i) ||
-          _nonIterableRest()
-        );
-      }
-      function _toConsumableArray(arr) {
-        return (
-          _arrayWithoutHoles(arr) ||
-          _iterableToArray(arr) ||
-          _unsupportedIterableToArray(arr) ||
-          _nonIterableSpread()
-        );
-      }
-      function _unsupportedIterableToArray(o, minLen) {
-        if (!o) return;
-        if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-        var n = Object.prototype.toString.call(o).slice(8, -1);
-        if (n === "Object" && o.constructor) n = o.constructor.name;
-        if (n === "Map" || n === "Set") return Array.from(n);
-        if (
-          n === "Arguments" ||
-          /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)
-        )
-          return _arrayLikeToArray(o, minLen);
-      }
+      var _define_property = __webpack_require__(3437)["default"];
+      var _sliced_to_array = __webpack_require__(7523) /* ["default"] */.Z;
+      var _to_consumable_array = __webpack_require__(1079) /* ["default"] */.Z;
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
       exports["default"] = Image;
       var _react = _interopRequireWildcard(__webpack_require__(9496));
-      var _head = _interopRequireDefault(__webpack_require__(4828));
-      var _imageConfig = __webpack_require__(2204);
-      var _useIntersection = __webpack_require__(6363);
-      var _imageConfigContext = __webpack_require__(1958);
-      var _utils = __webpack_require__(8030);
-      var _normalizeTrailingSlash = __webpack_require__(1872);
+      var _head = _interopRequireDefault(__webpack_require__(5222));
+      var _imageConfig = __webpack_require__(5466);
+      var _useIntersection = __webpack_require__(1311);
+      var _imageConfigContext = __webpack_require__(1801);
+      var _utils = __webpack_require__(9089);
+      var _normalizeTrailingSlash = __webpack_require__(2800);
       function Image(_param) {
         var src = _param.src,
           sizes = _param.sizes,
@@ -177,8 +83,8 @@
           function() {
             var c =
               configEnv || configContext || _imageConfig.imageConfigDefault;
-            var allSizes = _toConsumableArray(c.deviceSizes)
-              .concat(_toConsumableArray(c.imageSizes))
+            var allSizes = _to_consumable_array(c.deviceSizes)
+              .concat(_to_consumable_array(c.imageSizes))
               .sort(function(a, b) {
                 return a - b;
               });
@@ -256,10 +162,10 @@
         if (true && loadedImageURLs.has(src) && layout !== "raw") {
           isLazy = false;
         }
-        var ref2 = _slicedToArray((0, _react).useState(false), 2),
+        var ref2 = _sliced_to_array((0, _react).useState(false), 2),
           blurComplete = ref2[0],
           setBlurComplete = ref2[1];
-        var ref1 = _slicedToArray(
+        var ref1 = _sliced_to_array(
             (0, _useIntersection).useIntersection({
               rootRef: lazyRoot,
               rootMargin: lazyBoundary || "200px",
@@ -408,8 +314,8 @@
         var _obj;
         var linkProps =
           ((_obj = {}), // Note: imagesrcset and imagesizes are not in the link element type with react 17.
-          _defineProperty(_obj, imageSrcSetPropName, imgAttributes.srcSet),
-          _defineProperty(_obj, imageSizesPropName, imgAttributes.sizes),
+          _define_property(_obj, imageSrcSetPropName, imgAttributes.srcSet),
+          _define_property(_obj, imageSizesPropName, imgAttributes.sizes),
           _obj);
         var useLayoutEffect = false ? 0 : _react.default.useLayoutEffect;
         var onLoadingCompleteRef = (0, _react).useRef(onLoadingComplete);
@@ -525,7 +431,7 @@
             : null
         );
       }
-      function _defineProperty1(obj, key, value) {
+      function _defineProperty(obj, key, value) {
         if (key in obj) {
           Object.defineProperty(obj, key, {
             value: value,
@@ -585,7 +491,7 @@
               );
             }
             ownKeys.forEach(function(key) {
-              _defineProperty1(target, key, source[key]);
+              _defineProperty(target, key, source[key]);
             });
           };
         for (var i = 1; i < arguments.length; i++) _loop(i);
@@ -699,7 +605,7 @@
             var smallestRatio =
               (_Math = Math).min.apply(
                 _Math,
-                _toConsumableArray(percentSizes)
+                _to_consumable_array(percentSizes)
               ) * 0.01;
             return {
               widths: allSizes.filter(function(s) {
@@ -723,7 +629,7 @@
             kind: "w"
           };
         }
-        var widths = _toConsumableArray(
+        var widths = _to_consumable_array(
           new Set( // > are actually 3x in the green color, but only 1.5x in the red and
             // > blue colors. Showing a 3x resolution image in the app vs a 2x
             // > resolution image will be visually the same, though the 3x image
@@ -1124,76 +1030,16 @@
       /***/
     },
 
-    /***/ 6363: /***/ function(module, exports, __webpack_require__) {
+    /***/ 1311: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
-      function _arrayLikeToArray(arr, len) {
-        if (len == null || len > arr.length) len = arr.length;
-        for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-        return arr2;
-      }
-      function _arrayWithHoles(arr) {
-        if (Array.isArray(arr)) return arr;
-      }
-      function _iterableToArrayLimit(arr, i) {
-        var _i =
-          arr == null
-            ? null
-            : (typeof Symbol !== "undefined" && arr[Symbol.iterator]) ||
-              arr["@@iterator"];
-        if (_i == null) return;
-        var _arr = [];
-        var _n = true;
-        var _d = false;
-        var _s, _e;
-        try {
-          for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-          }
-        } catch (err) {
-          _d = true;
-          _e = err;
-        } finally {
-          try {
-            if (!_n && _i["return"] != null) _i["return"]();
-          } finally {
-            if (_d) throw _e;
-          }
-        }
-        return _arr;
-      }
-      function _nonIterableRest() {
-        throw new TypeError(
-          "Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."
-        );
-      }
-      function _slicedToArray(arr, i) {
-        return (
-          _arrayWithHoles(arr) ||
-          _iterableToArrayLimit(arr, i) ||
-          _unsupportedIterableToArray(arr, i) ||
-          _nonIterableRest()
-        );
-      }
-      function _unsupportedIterableToArray(o, minLen) {
-        if (!o) return;
-        if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-        var n = Object.prototype.toString.call(o).slice(8, -1);
-        if (n === "Object" && o.constructor) n = o.constructor.name;
-        if (n === "Map" || n === "Set") return Array.from(n);
-        if (
-          n === "Arguments" ||
-          /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)
-        )
-          return _arrayLikeToArray(o, minLen);
-      }
+      var _sliced_to_array = __webpack_require__(7523) /* ["default"] */.Z;
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
       exports.useIntersection = useIntersection;
       var _react = __webpack_require__(9496);
-      var _requestIdleCallback = __webpack_require__(7808);
+      var _requestIdleCallback = __webpack_require__(7307);
       var hasIntersectionObserver = typeof IntersectionObserver !== "undefined";
       function useIntersection(param) {
         var rootRef = param.rootRef,
@@ -1201,10 +1047,10 @@
           disabled = param.disabled;
         var isDisabled = disabled || !hasIntersectionObserver;
         var unobserve = (0, _react).useRef();
-        var ref = _slicedToArray((0, _react).useState(false), 2),
+        var ref = _sliced_to_array((0, _react).useState(false), 2),
           visible = ref[0],
           setVisible = ref[1];
-        var ref1 = _slicedToArray(
+        var ref1 = _sliced_to_array(
             (0, _react).useState(rootRef ? rootRef.current : null),
             2
           ),
@@ -1339,7 +1185,7 @@
       /***/
     },
 
-    /***/ 3918: /***/ function(
+    /***/ 2330: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -1360,8 +1206,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@17.0.2/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(4637);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_sfoxds7t5ydpegc3knd667wn6m/node_modules/next/image.js
-      var next_image = __webpack_require__(8114);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_sfoxds7t5ydpegc3knd667wn6m/node_modules/next/image.js
+      var next_image = __webpack_require__(4033);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ var nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -1389,12 +1235,12 @@
       /***/
     },
 
-    /***/ 8114: /***/ function(
+    /***/ 4033: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(2185);
+      module.exports = __webpack_require__(5239);
 
       /***/
     }
@@ -1405,7 +1251,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(7570);
+      return __webpack_exec__(1487);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for index-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [405],
   {
-    /***/ 4786: /***/ function(
+    /***/ 6967: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/",
         function() {
-          return __webpack_require__(7245);
+          return __webpack_require__(9257);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 7245: /***/ function(
+    /***/ 9257: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -46,7 +46,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function() {
-      return __webpack_exec__(4786);
+      return __webpack_exec__(6967);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for link-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [644],
   {
-    /***/ 2783: /***/ function(
+    /***/ 9367: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/link",
         function() {
-          return __webpack_require__(3122);
+          return __webpack_require__(7178);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 7870: /***/ function(module, exports) {
+    /***/ 7280: /***/ function(module, exports) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -54,90 +54,23 @@
       /***/
     },
 
-    /***/ 7160: /***/ function(module, exports, __webpack_require__) {
+    /***/ 3952: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
-      function _arrayLikeToArray(arr, len) {
-        if (len == null || len > arr.length) len = arr.length;
-        for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-        return arr2;
-      }
-      function _arrayWithHoles(arr) {
-        if (Array.isArray(arr)) return arr;
-      }
-      function _iterableToArrayLimit(arr, i) {
-        var _i =
-          arr == null
-            ? null
-            : (typeof Symbol !== "undefined" && arr[Symbol.iterator]) ||
-              arr["@@iterator"];
-        if (_i == null) return;
-        var _arr = [];
-        var _n = true;
-        var _d = false;
-        var _s, _e;
-        try {
-          for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-          }
-        } catch (err) {
-          _d = true;
-          _e = err;
-        } finally {
-          try {
-            if (!_n && _i["return"] != null) _i["return"]();
-          } finally {
-            if (_d) throw _e;
-          }
-        }
-        return _arr;
-      }
-      function _nonIterableRest() {
-        throw new TypeError(
-          "Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."
-        );
-      }
-      function _slicedToArray(arr, i) {
-        return (
-          _arrayWithHoles(arr) ||
-          _iterableToArrayLimit(arr, i) ||
-          _unsupportedIterableToArray(arr, i) ||
-          _nonIterableRest()
-        );
-      }
-      var _typeof = function(obj) {
-        "@swc/helpers - typeof";
-        return obj &&
-          typeof Symbol !== "undefined" &&
-          obj.constructor === Symbol
-          ? "symbol"
-          : typeof obj;
-      };
-      function _unsupportedIterableToArray(o, minLen) {
-        if (!o) return;
-        if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-        var n = Object.prototype.toString.call(o).slice(8, -1);
-        if (n === "Object" && o.constructor) n = o.constructor.name;
-        if (n === "Map" || n === "Set") return Array.from(n);
-        if (
-          n === "Arguments" ||
-          /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)
-        )
-          return _arrayLikeToArray(o, minLen);
-      }
+      var _sliced_to_array = __webpack_require__(7523) /* ["default"] */.Z;
+      var _type_of = __webpack_require__(5565)["default"];
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
       exports["default"] = void 0;
       var _react = _interopRequireDefault(__webpack_require__(9496));
-      var _router = __webpack_require__(1368);
-      var _addLocale = __webpack_require__(3090);
-      var _routerContext = __webpack_require__(9831);
-      var _appRouterContext = __webpack_require__(482);
-      var _useIntersection = __webpack_require__(6363);
-      var _getDomainLocale = __webpack_require__(7870);
-      var _addBasePath = __webpack_require__(596);
+      var _router = __webpack_require__(5920);
+      var _addLocale = __webpack_require__(4841);
+      var _routerContext = __webpack_require__(8940);
+      var _appRouterContext = __webpack_require__(2587);
+      var _useIntersection = __webpack_require__(1311);
+      var _getDomainLocale = __webpack_require__(7280);
+      var _addBasePath = __webpack_require__(9154);
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -294,7 +227,7 @@
           );
         }
         var p = prefetchProp !== false;
-        var ref3 = _slicedToArray(
+        var ref3 = _sliced_to_array(
             hasUseTransition // @ts-ignore useTransition exists
               ? // eslint-disable-next-line react-hooks/rules-of-hooks
                 _react.default.useTransition()
@@ -311,7 +244,7 @@
         }
         var ref1 = _react.default.useMemo(
             function() {
-              var ref = _slicedToArray(
+              var ref = _sliced_to_array(
                   (0, _router).resolveHref(router, hrefProp, true),
                   2
                 ),
@@ -341,7 +274,7 @@
         var childRef = legacyBehavior
           ? child && typeof child === "object" && child.ref
           : forwardedRef;
-        var ref2 = _slicedToArray(
+        var ref2 = _sliced_to_array(
             (0, _useIntersection).useIntersection({
               rootMargin: "200px"
             }),
@@ -486,76 +419,16 @@
       /***/
     },
 
-    /***/ 6363: /***/ function(module, exports, __webpack_require__) {
+    /***/ 1311: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
-      function _arrayLikeToArray(arr, len) {
-        if (len == null || len > arr.length) len = arr.length;
-        for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-        return arr2;
-      }
-      function _arrayWithHoles(arr) {
-        if (Array.isArray(arr)) return arr;
-      }
-      function _iterableToArrayLimit(arr, i) {
-        var _i =
-          arr == null
-            ? null
-            : (typeof Symbol !== "undefined" && arr[Symbol.iterator]) ||
-              arr["@@iterator"];
-        if (_i == null) return;
-        var _arr = [];
-        var _n = true;
-        var _d = false;
-        var _s, _e;
-        try {
-          for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-          }
-        } catch (err) {
-          _d = true;
-          _e = err;
-        } finally {
-          try {
-            if (!_n && _i["return"] != null) _i["return"]();
-          } finally {
-            if (_d) throw _e;
-          }
-        }
-        return _arr;
-      }
-      function _nonIterableRest() {
-        throw new TypeError(
-          "Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."
-        );
-      }
-      function _slicedToArray(arr, i) {
-        return (
-          _arrayWithHoles(arr) ||
-          _iterableToArrayLimit(arr, i) ||
-          _unsupportedIterableToArray(arr, i) ||
-          _nonIterableRest()
-        );
-      }
-      function _unsupportedIterableToArray(o, minLen) {
-        if (!o) return;
-        if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-        var n = Object.prototype.toString.call(o).slice(8, -1);
-        if (n === "Object" && o.constructor) n = o.constructor.name;
-        if (n === "Map" || n === "Set") return Array.from(n);
-        if (
-          n === "Arguments" ||
-          /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)
-        )
-          return _arrayLikeToArray(o, minLen);
-      }
+      var _sliced_to_array = __webpack_require__(7523) /* ["default"] */.Z;
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
       exports.useIntersection = useIntersection;
       var _react = __webpack_require__(9496);
-      var _requestIdleCallback = __webpack_require__(7808);
+      var _requestIdleCallback = __webpack_require__(7307);
       var hasIntersectionObserver = typeof IntersectionObserver !== "undefined";
       function useIntersection(param) {
         var rootRef = param.rootRef,
@@ -563,10 +436,10 @@
           disabled = param.disabled;
         var isDisabled = disabled || !hasIntersectionObserver;
         var unobserve = (0, _react).useRef();
-        var ref = _slicedToArray((0, _react).useState(false), 2),
+        var ref = _sliced_to_array((0, _react).useState(false), 2),
           visible = ref[0],
           setVisible = ref[1];
-        var ref1 = _slicedToArray(
+        var ref1 = _sliced_to_array(
             (0, _react).useState(rootRef ? rootRef.current : null),
             2
           ),
@@ -701,7 +574,7 @@
       /***/
     },
 
-    /***/ 482: /***/ function(
+    /***/ 2587: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -728,7 +601,7 @@
       /***/
     },
 
-    /***/ 3122: /***/ function(
+    /***/ 7178: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -745,7 +618,7 @@
         4637
       );
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        8168
+        8728
       );
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_link__WEBPACK_IMPORTED_MODULE_1__
@@ -776,12 +649,12 @@
       /***/
     },
 
-    /***/ 8168: /***/ function(
+    /***/ 8728: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(7160);
+      module.exports = __webpack_require__(3952);
 
       /***/
     }
@@ -792,7 +665,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(2783);
+      return __webpack_exec__(9367);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for routerDirect-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [58],
   {
-    /***/ 5863: /***/ function(
+    /***/ 4538: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/routerDirect",
         function() {
-          return __webpack_require__(2550);
+          return __webpack_require__(8080);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 2550: /***/ function(
+    /***/ 8080: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -35,7 +35,7 @@
         4637
       );
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        9393
+        7084
       );
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_router__WEBPACK_IMPORTED_MODULE_1__
@@ -57,12 +57,12 @@
       /***/
     },
 
-    /***/ 9393: /***/ function(
+    /***/ 7084: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(7465);
+      module.exports = __webpack_require__(1905);
 
       /***/
     }
@@ -73,7 +73,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(5863);
+      return __webpack_exec__(4538);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for script-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [797],
   {
-    /***/ 581: /***/ function(
+    /***/ 2644: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/script",
         function() {
-          return __webpack_require__(6436);
+          return __webpack_require__(9689);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 6436: /***/ function(
+    /***/ 9689: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -35,7 +35,7 @@
         4637
       );
       /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        2311
+        7635
       );
       /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_script__WEBPACK_IMPORTED_MODULE_1__
@@ -70,12 +70,12 @@
       /***/
     },
 
-    /***/ 2311: /***/ function(
+    /***/ 7635: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(5031);
+      module.exports = __webpack_require__(736);
 
       /***/
     }
@@ -86,7 +86,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(581);
+      return __webpack_exec__(2644);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for withRouter-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [807],
   {
-    /***/ 4573: /***/ function(
+    /***/ 5577: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/withRouter",
         function() {
-          return __webpack_require__(5526);
+          return __webpack_require__(237);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 5526: /***/ function(
+    /***/ 237: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -35,7 +35,7 @@
         4637
       );
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        9393
+        7084
       );
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_router__WEBPACK_IMPORTED_MODULE_1__
@@ -54,12 +54,12 @@
       /***/
     },
 
-    /***/ 9393: /***/ function(
+    /***/ 7084: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(7465);
+      module.exports = __webpack_require__(1905);
 
       /***/
     }
@@ -70,7 +70,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(4573);
+      return __webpack_exec__(5577);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for 437.HASH.js
@@ -1,8 +1,8 @@
 "use strict";
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
-  [437],
+  [181],
   {
-    /***/ 7437: /***/ function(
+    /***/ 1181: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
Diff for framework-HASH.js
@@ -19,7 +19,7 @@
  Modernizr 3.0.0pre (Custom Build) | MIT
 */
       var aa = __webpack_require__(9496),
-        m = __webpack_require__(9260),
+        m = __webpack_require__(2048),
         r = __webpack_require__(8051);
       function y(a) {
         for (
@@ -7895,7 +7895,7 @@
        * This source code is licensed under the MIT license found in the
        * LICENSE file in the root directory of this source tree.
        */
-      __webpack_require__(9260);
+      __webpack_require__(2048);
       var f = __webpack_require__(9496),
         g = 60103;
       exports.Fragment = 60107;
@@ -7948,7 +7948,7 @@
        * This source code is licensed under the MIT license found in the
        * LICENSE file in the root directory of this source tree.
        */
-      var l = __webpack_require__(9260),
+      var l = __webpack_require__(2048),
         n = 60103,
         p = 60106;
       exports.Fragment = 60107;
Diff for main-HASH.js

Diff too large to display

Diff for webpack-HASH.js
@@ -159,7 +159,7 @@
     /******/ __webpack_require__.u = function(chunkId) {
       /******/ // return url for filenames based on template
       /******/ return (
-        "static/chunks/" + chunkId + "." + "b72a55e4a5d30197" + ".js"
+        "static/chunks/
Post job cleanup.
[command]/usr/bin/git version
git version 2.36.1
Temporarily overriding HOME='/home/runner/work/_temp/6534df6f-57e1-4c63-bff0-d9397e682828' before making global git config changes
Adding repository directory to the temporary git global config as a safe directory
[command]/usr/bin/git config --global --add safe.directory /home/runner/work/next.js/next.js
[command]/usr/bin/git config --local --name-only --get-regexp core\.sshCommand
[command]/usr/bin/git submodule foreach --recursive git config --local --name-only --get-regexp 'core\.sshCommand' && git config --local --unset-all 'core.sshCommand' || :
[command]/usr/bin/git config --local --name-only --get-regexp http\.https\:\/\/github\.com\/\.extraheader
http.https://github.com/.extraheader
[command]/usr/bin/git config --local --unset-all http.https://github.com/.extraheader
[command]/usr/bin/git submodule foreach --recursive git config --local --name-only --get-regexp 'http\.https\:\/\/github\.com\/\.extraheader' && git config --local --unset-all 'http.https://github.com/.extraheader' || :
Cleaning up orphan processes
Commit: d1b07f70f36a4a7e8467d51587109ea6ab07f058

@ijjk ijjk marked this pull request as ready for review May 24, 2022 06:39
@SukkaW
Copy link
Contributor

SukkaW commented May 24, 2022

See also:

And here are some catches:

  • I have been using externalHelpers in my own Next.js site for about a month (through patch-package). I notice that although the final output size is indeed smaller, the size of the main bundle actually increases. And I realize that the webpack might not be able to tree shake @swc/helpers correctly (E.g., the helper for the legacy decorator proposal is always imported in the main bundle). Maybe it is the same issue as [Tree Shake] Next.js emit unused code into the main bundle #36702, or it might be solved by feat(es/helpers): Import only used helpers swc-project/swc#4767 already.
  • It is not the first time Next.js trying to enable externalHelpers, see Try using @swc/helpers #30205 by @timneutkens.
  • Also in Try using @swc/helpers #30205, @timneutkens tries to enable externalHelpers for precompiled modules as well. The result shows the final bundle size actually increases. It might be caused by the externalHelpers being imported in every precompiled module causing the duplication. If we find a way to avoid duplication and enable externalHelpers for all precompiled modules, the final bundle size (and the installation size) could be further reduced.

And IMHO:

  • It should be added as an experimental option first.
  • A telemetry should be added to monitor the usage of the option.

@ijjk
Copy link
Member Author

ijjk commented May 24, 2022

The result shows the final bundle size actually increases

@SukkaW this has been fixed in the latest version of swc, see related PR here swc-project/swc#4767 we can also see the decrease in bundle sizes in stats here #37150 (comment)

Not sure this needs be experimental considering the above is resolved so should be just as stable as duplicating the helpers was previously and we are going to have the @swc/helpers package as a top-level dependency so users don't need to install it.

# Conflicts:
#	packages/next/package.json
@gaearon
Copy link

gaearon commented May 24, 2022

It might be caused by the externalHelpers being imported in every precompiled module causing the duplication.

One thing that would be nice if if they were hoisted outside the module system and referenced via closure. Not sure how hard that is with the current architecture.

@SukkaW
Copy link
Contributor

SukkaW commented May 24, 2022

It might be caused by the externalHelpers being imported in every precompiled module causing the duplication.

One thing that would be nice if if they were hoisted outside the module system and referenced via closure. Not sure how hard that is with the current architecture.

I think there is a better solution: set @swc/helpers as an external dependency when precompiling modules (which will retain require('@swc/helpers/[filename]') in the emitted output). And then there will be only one @swc/helpers being included when Next.js sites compile and bundle.

# Conflicts:
#	packages/next/package.json
#	yarn.lock
@ijjk ijjk merged commit ff0ccc4 into vercel:canary Jun 7, 2022
@ijjk ijjk deleted the enable/swc-external-helpers branch June 7, 2022 15:59
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 8, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants