Implement granular chunks #7696
Merged
+265
−34
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
atcastle
requested review from
dav-is,
ijjk,
lfades,
Timer and
timneutkens
as code owners
Stats from current PRClick to expand stats
Click to expand serverless stats
|
developit
reviewed
Jun 28, 2019
developit
previously approved these changes
Jun 28, 2019
Stats from current PRClick to expand stats
|
| zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | |
|---|---|---|---|
| Build Duration | 14.3s | 14.5s | |
node_modules Size |
45.4 MB | 45.4 MB | |
| Total Bundle (main, webpack, commons) Size | 210 kB | 212 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _error Size |
8.45 kB | 8.45 kB | ✓ |
Client _error gzip Size |
3.24 kB | 3.24 kB | ✓ |
Client pages/index Size |
296 B | 296 B | ✓ |
Client pages/index gzip Size |
222 B | 222 B | ✓ |
Client pages/link Size |
4.76 kB | 4.76 kB | ✓ |
Client pages/link gzip Size |
2.03 kB | 2.03 kB | ✓ |
Client pages/routerDirect Size |
423 B | 423 B | ✓ |
Client pages/routerDirect gzip Size |
306 B | 306 B | ✓ |
Client pages/withRouter Size |
435 B | 435 B | ✓ |
Client pages/withRouter gzip Size |
301 B | 301 B | ✓ |
Client main Size |
24.3 kB | 26 kB | |
Client main gzip Size |
7.97 kB | 8.6 kB | |
Client commons Size |
183 kB | 183 kB | ✓ |
Client commons gzip Size |
59.5 kB | 59.5 kB | ✓ |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
| Base Rendered Size | 1.36 kB | 1.36 kB | ✓ |
| Build Dir Size | 785 kB | 791 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
| zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | |
|---|---|---|---|
| Build Duration | 16s | 16.1s | |
node_modules Size |
45.4 MB | 45.4 MB | |
| Total Bundle (main, webpack, commons) Size | 210 kB | 212 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _error Size |
8.45 kB | 8.45 kB | ✓ |
Client _error gzip Size |
3.24 kB | 3.24 kB | ✓ |
Client pages/index Size |
296 B | 296 B | ✓ |
Client pages/index gzip Size |
222 B | 222 B | ✓ |
Client pages/link Size |
4.76 kB | 4.76 kB | ✓ |
Client pages/link gzip Size |
2.03 kB | 2.03 kB | ✓ |
Client pages/routerDirect Size |
423 B | 423 B | ✓ |
Client pages/routerDirect gzip Size |
306 B | 306 B | ✓ |
Client pages/withRouter Size |
435 B | 435 B | ✓ |
Client pages/withRouter gzip Size |
301 B | 301 B | ✓ |
Client main Size |
24.3 kB | 26 kB | |
Client main gzip Size |
7.97 kB | 8.6 kB | |
Client commons Size |
183 kB | 183 kB | ✓ |
Client commons gzip Size |
59.5 kB | 59.5 kB | ✓ |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
Serverless pages/link Size |
338 kB | 338 kB | ✓ |
Serverless pages/link gzip Size |
86.7 kB | 86.7 kB | ✓ |
Serverless pages/index Size |
Error getting size | Error getting size | ✓ |
Serverless pages/index gzip Size |
Error getting size | Error getting size | ✓ |
Serverless pages/_error Size |
328 kB | 328 kB | ✓ |
Serverless pages/_error gzip Size |
84 kB | 84 kB | ✓ |
Serverless pages/routerDirect Size |
329 kB | 329 kB | ✓ |
Serverless pages/routerDirect gzip Size |
84.3 kB | 84.3 kB | ✓ |
Serverless pages/withRouter Size |
329 kB | 329 kB | ✓ |
Serverless pages/withRouter gzip Size |
84.2 kB | 84.2 kB | ✓ |
| Build Dir Size | 2.04 MB | 2.04 MB |
Stats from current PRClick to expand stats
|
| zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | |
|---|---|---|---|
| Build Duration | 13.8s | 13.7s | -114ms |
node_modules Size |
45.4 MB | 45.4 MB | |
| Total Bundle (main, webpack, commons) Size | 210 kB | 212 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _error Size |
8.45 kB | 8.45 kB | ✓ |
Client _error gzip Size |
3.24 kB | 3.24 kB | ✓ |
Client pages/index Size |
296 B | 296 B | ✓ |
Client pages/index gzip Size |
222 B | 222 B | ✓ |
Client pages/link Size |
4.76 kB | 4.76 kB | ✓ |
Client pages/link gzip Size |
2.03 kB | 2.03 kB | ✓ |
Client pages/routerDirect Size |
423 B | 423 B | ✓ |
Client pages/routerDirect gzip Size |
306 B | 306 B | ✓ |
Client pages/withRouter Size |
435 B | 435 B | ✓ |
Client pages/withRouter gzip Size |
301 B | 301 B | ✓ |
Client main Size |
24.3 kB | 26 kB | |
Client main gzip Size |
7.97 kB | 8.6 kB | |
Client commons Size |
183 kB | 183 kB | ✓ |
Client commons gzip Size |
59.5 kB | 59.5 kB | ✓ |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
| Base Rendered Size | 1.36 kB | 1.36 kB | ✓ |
| Build Dir Size | 785 kB | 791 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
| zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | |
|---|---|---|---|
| Build Duration | 15.8s | 15.8s | |
node_modules Size |
45.4 MB | 45.4 MB | |
| Total Bundle (main, webpack, commons) Size | 210 kB | 212 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _error Size |
8.45 kB | 8.45 kB | ✓ |
Client _error gzip Size |
3.24 kB | 3.24 kB | ✓ |
Client pages/index Size |
296 B | 296 B | ✓ |
Client pages/index gzip Size |
222 B | 222 B | ✓ |
Client pages/link Size |
4.76 kB | 4.76 kB | ✓ |
Client pages/link gzip Size |
2.03 kB | 2.03 kB | ✓ |
Client pages/routerDirect Size |
423 B | 423 B | ✓ |
Client pages/routerDirect gzip Size |
306 B | 306 B | ✓ |
Client pages/withRouter Size |
435 B | 435 B | ✓ |
Client pages/withRouter gzip Size |
301 B | 301 B | ✓ |
Client main Size |
24.3 kB | 26 kB | |
Client main gzip Size |
7.97 kB | 8.6 kB | |
Client commons Size |
183 kB | 183 kB | ✓ |
Client commons gzip Size |
59.5 kB | 59.5 kB | ✓ |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
Serverless pages/link Size |
338 kB | 338 kB | ✓ |
Serverless pages/link gzip Size |
86.7 kB | 86.7 kB | ✓ |
Serverless pages/index Size |
Error getting size | Error getting size | ✓ |
Serverless pages/index gzip Size |
Error getting size | Error getting size | ✓ |
Serverless pages/_error Size |
328 kB | 328 kB | ✓ |
Serverless pages/_error gzip Size |
84 kB | 84 kB | ✓ |
Serverless pages/routerDirect Size |
329 kB | 329 kB | ✓ |
Serverless pages/routerDirect gzip Size |
84.3 kB | 84.3 kB | -2 B |
Serverless pages/withRouter Size |
329 kB | 329 kB | ✓ |
Serverless pages/withRouter gzip Size |
84.2 kB | 84.2 kB | |
| Build Dir Size | 2.04 MB | 2.04 MB |
developit
reviewed
Jul 11, 2019
developit
reviewed
Jul 11, 2019
…js into implement-granular-chunks
Stats from current PRClick to expand stats
|
| zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | |
|---|---|---|---|
| Build Duration | 14.3s | 14.4s | |
node_modules Size |
45.4 MB | 45.4 MB | |
| Total Bundle (main, webpack, commons) Size | 210 kB | 212 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _error Size |
8.45 kB | 8.45 kB | ✓ |
Client _error gzip Size |
3.24 kB | 3.24 kB | ✓ |
Client pages/index Size |
296 B | 296 B | ✓ |
Client pages/index gzip Size |
222 B | 222 B | ✓ |
Client pages/link Size |
4.19 kB | 4.76 kB | |
Client pages/link gzip Size |
1.82 kB | 2.03 kB | |
Client pages/routerDirect Size |
423 B | 423 B | ✓ |
Client pages/routerDirect gzip Size |
306 B | 306 B | ✓ |
Client pages/withRouter Size |
435 B | 435 B | ✓ |
Client pages/withRouter gzip Size |
301 B | 301 B | ✓ |
Client main Size |
23.7 kB | 26 kB | |
Client main gzip Size |
7.81 kB | 8.6 kB | |
Client commons Size |
184 kB | 183 kB | -602 B |
Client commons gzip Size |
59.7 kB | 59.5 kB | -143 B |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
| Base Rendered Size | 1.36 kB | 1.36 kB | ✓ |
| Build Dir Size | 757 kB | 791 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
| zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | |
|---|---|---|---|
| Build Duration | 15.3s | 16.4s | |
node_modules Size |
45.4 MB | 45.4 MB | |
| Total Bundle (main, webpack, commons) Size | 210 kB | 212 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _error Size |
8.45 kB | 8.45 kB | ✓ |
Client _error gzip Size |
3.24 kB | 3.24 kB | ✓ |
Client pages/index Size |
296 B | 296 B | ✓ |
Client pages/index gzip Size |
222 B | 222 B | ✓ |
Client pages/link Size |
4.19 kB | 4.76 kB | |
Client pages/link gzip Size |
1.82 kB | 2.03 kB | |
Client pages/routerDirect Size |
423 B | 423 B | ✓ |
Client pages/routerDirect gzip Size |
306 B | 306 B | ✓ |
Client pages/withRouter Size |
435 B | 435 B | ✓ |
Client pages/withRouter gzip Size |
301 B | 301 B | ✓ |
Client main Size |
23.7 kB | 26 kB | |
Client main gzip Size |
7.81 kB | 8.6 kB | |
Client commons Size |
184 kB | 183 kB | -602 B |
Client commons gzip Size |
59.7 kB | 59.5 kB | -143 B |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
Serverless pages/link Size |
338 kB | 338 kB | -31 B |
Serverless pages/link gzip Size |
86.8 kB | 86.7 kB | -26 B |
Serverless pages/index Size |
Error getting size | Error getting size | ✓ |
Serverless pages/index gzip Size |
Error getting size | Error getting size | ✓ |
Serverless pages/_error Size |
328 kB | 328 kB | -31 B |
Serverless pages/_error gzip Size |
84 kB | 84 kB | -26 B |
Serverless pages/routerDirect Size |
329 kB | 329 kB | -31 B |
Serverless pages/routerDirect gzip Size |
84.3 kB | 84.3 kB | -26 B |
Serverless pages/withRouter Size |
329 kB | 329 kB | -31 B |
Serverless pages/withRouter gzip Size |
84.3 kB | 84.2 kB | -24 B |
| Build Dir Size | 1.94 MB | 2.04 MB |
Stats from current PRClick to expand stats
|
| zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | |
|---|---|---|---|
| Build Duration | 14.5s | 14.8s | |
node_modules Size |
45.4 MB | 45.4 MB | |
| Total Bundle (main, webpack, commons) Size | 210 kB | 212 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _error Size |
8.45 kB | 8.45 kB | ✓ |
Client _error gzip Size |
3.24 kB | 3.24 kB | ✓ |
Client pages/index Size |
296 B | 296 B | ✓ |
Client pages/index gzip Size |
222 B | 222 B | ✓ |
Client pages/link Size |
4.19 kB | 4.76 kB | |
Client pages/link gzip Size |
1.82 kB | 2.03 kB | |
Client pages/routerDirect Size |
423 B | 423 B | ✓ |
Client pages/routerDirect gzip Size |
306 B | 306 B | ✓ |
Client pages/withRouter Size |
435 B | 435 B | ✓ |
Client pages/withRouter gzip Size |
301 B | 301 B | ✓ |
Client main Size |
23.7 kB | 26 kB | |
Client main gzip Size |
7.81 kB | 8.6 kB | |
Client commons Size |
184 kB | 183 kB | -602 B |
Client commons gzip Size |
59.7 kB | 59.5 kB | -143 B |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
| Base Rendered Size | 1.36 kB | 1.36 kB | ✓ |
| Build Dir Size | 757 kB | 791 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
| zeit/next.js canary | atcastle/next.js implement-granular-chunks | Change | |
|---|---|---|---|
| Build Duration | 15.5s | 16.7s | |
node_modules Size |
45.4 MB | 45.4 MB | |
| Total Bundle (main, webpack, commons) Size | 210 kB | 212 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 68.8 kB | 69.4 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _error Size |
8.45 kB | 8.45 kB | ✓ |
Client _error gzip Size |
3.24 kB | 3.24 kB | ✓ |
Client pages/index Size |
296 B | 296 B | ✓ |
Client pages/index gzip Size |
222 B | 222 B | ✓ |
Client pages/link Size |
4.19 kB | 4.76 kB | |
Client pages/link gzip Size |
1.82 kB | 2.03 kB | |
Client pages/routerDirect Size |
423 B | 423 B | ✓ |
Client pages/routerDirect gzip Size |
306 B | 306 B | ✓ |
Client pages/withRouter Size |
435 B | 435 B | ✓ |
Client pages/withRouter gzip Size |
301 B | 301 B | ✓ |
Client main Size |
23.7 kB | 26 kB | |
Client main gzip Size |
7.81 kB | 8.6 kB | |
Client commons Size |
184 kB | 183 kB | -602 B |
Client commons gzip Size |
59.7 kB | 59.5 kB | -143 B |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
Serverless pages/link Size |
338 kB | 338 kB | -31 B |
Serverless pages/link gzip Size |
86.8 kB | 86.7 kB | -27 B |
Serverless pages/index Size |
Error getting size | Error getting size | ✓ |
Serverless pages/index gzip Size |
Error getting size | Error getting size | ✓ |
Serverless pages/_error Size |
328 kB | 328 kB | -31 B |
Serverless pages/_error gzip Size |
84 kB | 84 kB | -28 B |
Serverless pages/routerDirect Size |
329 kB | 329 kB | -31 B |
Serverless pages/routerDirect gzip Size |
84.3 kB | 84.3 kB | -29 B |
Serverless pages/withRouter Size |
329 kB | 329 kB | -31 B |
Serverless pages/withRouter gzip Size |
84.3 kB | 84.2 kB | -25 B |
| Build Dir Size | 1.94 MB | 2.04 MB |
Co-Authored-By: Jason Miller <developit@users.noreply.github.com>
Stats from current PRClick to expand stats ✅ Total Bundle Size Decrease ✅
Click to expand serverless stats ✅ Total Bundle Size Decrease ✅
Diff for main.js@@ -1,20 +1,5 @@
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{
-/***/ "+iuc":
-/***/ (function(module, exports, __webpack_require__) {
-
-__webpack_require__("wgeU");
-__webpack_require__("FlQf");
-__webpack_require__("bBy9");
-__webpack_require__("B9jh");
-__webpack_require__("dL40");
-__webpack_require__("xvv9");
-__webpack_require__("V+O7");
-module.exports = __webpack_require__("WEpk").Set;
-
-
-/***/ }),
-
/***/ "+oT+":
/***/ (function(module, exports, __webpack_require__) {
@@ -69,28 +54,6 @@ __webpack_require__("cHUd")('Map');
/***/ }),
-/***/ "B9jh":
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var strong = __webpack_require__("Wu5q");
-var validate = __webpack_require__("n3ko");
-var SET = 'Set';
-
-// 23.2 Set Objects
-module.exports = __webpack_require__("raTm")(SET, function (get) {
- return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); };
-}, {
- // 23.2.3.1 Set.prototype.add(value)
- add: function add(value) {
- return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value);
- }
-}, strong);
-
-
-/***/ }),
-
/***/ "BMP1":
/***/ (function(module, exports, __webpack_require__) {
@@ -919,15 +882,6 @@ module.exports = __webpack_require__("WEpk").Map;
/***/ }),
-/***/ "V+O7":
-/***/ (function(module, exports, __webpack_require__) {
-
-// https://tc39.github.io/proposal-setmap-offrom/#sec-set.from
-__webpack_require__("aPfg")('Set');
-
-
-/***/ }),
-
/***/ "XLbu":
/***/ (function(module, exports, __webpack_require__) {
@@ -995,17 +949,6 @@ exports.DataManager = DataManager;
/***/ }),
-/***/ "dL40":
-/***/ (function(module, exports, __webpack_require__) {
-
-// https://github.com/DavidBruant/Map-Set.prototype.toJSON
-var $export = __webpack_require__("Y7ZC");
-
-$export($export.P + $export.R, 'Set', { toJSON: __webpack_require__("8iia")('Set') });
-
-
-/***/ }),
-
/***/ "dVTT":
/***/ (function(module, exports, __webpack_require__) {
@@ -1083,22 +1026,6 @@ exports.DataManagerContext = React.createContext(null);
/***/ }),
-/***/ "ttDY":
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = __webpack_require__("+iuc");
-
-/***/ }),
-
-/***/ "xvv9":
-/***/ (function(module, exports, __webpack_require__) {
-
-// https://tc39.github.io/proposal-setmap-offrom/#sec-set.of
-__webpack_require__("cHUd")('Set');
-
-
-/***/ }),
-
/***/ "zmvN":
/***/ (function(module, exports, __webpack_require__) {
@@ -1122,12 +1049,10 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+"));
var _promise = _interopRequireDefault(__webpack_require__("eVuF"));
-var _set = _interopRequireDefault(__webpack_require__("ttDY"));
-
var _mitt = _interopRequireDefault(__webpack_require__("kiME"));
var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl"));
-/* global document */
+/* global document, window */
function supportsPreload(el) {
@@ -1157,13 +1082,31 @@ function () {
this.buildId = buildId;
this.assetPrefix = assetPrefix;
this.pageCache = {};
- this.prefetchCache = new _set["default"]();
this.pageRegisterEvents = (0, _mitt["default"])();
this.loadingRoutes = {};
this.promisedBuildId = _promise["default"].resolve();
- }
+ this.promisedBuildManifest = new _promise["default"](function (resolve) {
+ if (window.__BUILD_MANIFEST) {
+ resolve(window.__BUILD_MANIFEST);
+ } else {
+ window.__BUILD_MANIFEST_CB = function () {
+ resolve(window.__BUILD_MANIFEST);
+ };
+ }
+ });
+ } // Returns a promise for the dependencies for a particular route
+
(0, _createClass2["default"])(PageLoader, [{
+ key: "getDependencies",
+ value: function getDependencies(route) {
+ return this.promisedBuildManifest.then(function (man) {
+ return man[route] && man[route].map(function (url) {
+ return "/_next/" + url;
+ }) || [];
+ });
+ }
+ }, {
key: "normalizeRoute",
value: function normalizeRoute(route) {
if (route[0] !== '/') {
@@ -1213,13 +1156,14 @@ function () {
if (document.getElementById("__NEXT_PAGE__" + route)) {
return;
- } // Load the script if not asked to load yet.
-
+ }
if (!_this3.loadingRoutes[route]) {
- _this3.loadScript(route);
+ if (false) {} else {
+ _this3.loadRoute(route);
- _this3.loadingRoutes[route] = true;
+ _this3.loadingRoutes[route] = true;
+ }
}
});
}
@@ -1249,14 +1193,14 @@ function () {
});
}
}, {
- key: "loadScript",
- value: function loadScript(route) {
+ key: "loadRoute",
+ value: function loadRoute(route) {
var _this = this;
return (0, _asyncToGenerator2["default"])(
/*#__PURE__*/
_regenerator["default"].mark(function _callee() {
- var scriptRoute, script, url;
+ var scriptRoute, url;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
@@ -1267,41 +1211,51 @@ function () {
case 2:
route = _this.normalizeRoute(route);
scriptRoute = route === '/' ? '/index.js' : route + ".js";
- script = document.createElement('script');
-
- if ( true && 'noModule' in script) {
- script.type = 'module';
- scriptRoute = scriptRoute.replace(/\.js$/, '.module.js');
- }
-
url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute;
- script.crossOrigin = "anonymous";
- script.src = url;
-
- script.onerror = function () {
- var error = new Error("Error loading script " + url);
- error.code = 'PAGE_LOAD_ERROR';
- _this.pageRegisterEvents.emit(route, {
- error: error
- });
- };
+ _this.loadScript(url, route, true);
- document.body.appendChild(script);
-
- case 11:
+ case 6:
case "end":
return _context.stop();
}
}
}, _callee);
}))();
+ }
+ }, {
+ key: "loadScript",
+ value: function loadScript(url, route, isPage) {
+ var _this5 = this;
+
+ var script = document.createElement('script');
+
+ if ( true && 'noModule' in script) {
+ script.type = 'module'; // Only page bundle scripts need to have .module added to url,
+ // dependencies already have it added during build manifest creation
+
+ if (isPage) url = url.replace(/\.js$/, '.module.js');
+ }
+
+ script.crossOrigin = "anonymous";
+ script.src = url;
+
+ script.onerror = function () {
+ var error = new Error("Error loading script " + url);
+ error.code = 'PAGE_LOAD_ERROR';
+
+ _this5.pageRegisterEvents.emit(route, {
+ error: error
+ });
+ };
+
+ document.body.appendChild(script);
} // This method if called by the route code.
}, {
key: "registerPage",
value: function registerPage(route, regFn) {
- var _this5 = this;
+ var _this6 = this;
var register = function register() {
try {
@@ -1309,21 +1263,21 @@ function () {
error = _regFn.error,
page = _regFn.page;
- _this5.pageCache[route] = {
+ _this6.pageCache[route] = {
error: error,
page: page
};
- _this5.pageRegisterEvents.emit(route, {
+ _this6.pageRegisterEvents.emit(route, {
error: error,
page: page
});
} catch (error) {
- _this5.pageCache[route] = {
+ _this6.pageCache[route] = {
error: error
};
- _this5.pageRegisterEvents.emit(route, {
+ _this6.pageRegisterEvents.emit(route, {
error: error
});
}
@@ -1335,17 +1289,21 @@ function () {
}
}, {
key: "prefetch",
- value: function prefetch(route) {
+ value: function prefetch(route, isDependency) {
var _this2 = this;
return (0, _asyncToGenerator2["default"])(
/*#__PURE__*/
_regenerator["default"].mark(function _callee2() {
- var scriptRoute, cn;
+ var scriptRoute, url, cn;
return _regenerator["default"].wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
+ _context2.next = 2;
+ return _this2.promisedBuildId;
+
+ case 2:
route = _this2.normalizeRoute(route);
scriptRoute = (route === '/' ? '/index' : route) + ".js";
@@ -1353,51 +1311,72 @@ function () {
scriptRoute = scriptRoute.replace(/\.js$/, '.module.js');
}
- if (!(_this2.prefetchCache.has(scriptRoute) || document.getElementById("__NEXT_PAGE__" + route))) {
- _context2.next = 5;
+ url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; // n.b. If preload is not supported, we fall back to `loadPage` which has
+ // its own deduping mechanism.
+
+ if (!(document.querySelector("link[rel=\"preload\"][href^=\"" + url + "\"]") || document.getElementById("__NEXT_PAGE__" + route))) {
+ _context2.next = 8;
break;
}
return _context2.abrupt("return");
- case 5:
- _this2.prefetchCache.add(scriptRoute); // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE
-
-
+ case 8:
if (!(cn = navigator.connection)) {
- _context2.next = 9;
+ _context2.next = 11;
break;
}
if (!((cn.effectiveType || '').indexOf('2g') !== -1 || cn.saveData)) {
- _context2.next = 9;
+ _context2.next = 11;
break;
}
return _context2.abrupt("return");
- case 9:
+ case 11:
+ if (true) {
+ _context2.next = 17;
+ break;
+ }
+
+ ;
+ _context2.next = 15;
+ return _this2.getDependencies(route);
+
+ case 15:
+ _context2.t0 = function (url) {
+ _this2.prefetch(url, true);
+ };
+
+ _context2.sent.forEach(_context2.t0);
+
+ case 17:
if (!hasPreload) {
- _context2.next = 14;
+ _context2.next = 20;
break;
}
- _context2.next = 12;
- return _this2.promisedBuildId;
+ preloadScript(url);
+ return _context2.abrupt("return");
+
+ case 20:
+ if (!isDependency) {
+ _context2.next = 22;
+ break;
+ }
- case 12:
- preloadScript(_this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute);
return _context2.abrupt("return");
- case 14:
+ case 22:
if (!(document.readyState === 'complete')) {
- _context2.next = 18;
+ _context2.next = 26;
break;
}
return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {}));
- case 18:
+ case 26:
return _context2.abrupt("return", new _promise["default"](function (resolve) {
window.addEventListener('load', function () {
_this2.loadPage(route).then(function () {
@@ -1408,7 +1387,7 @@ function () {
});
}));
- case 19:
+ case 27:
case "end":
return _context2.stop();
}
Diff for mainModern.js@@ -1,20 +1,5 @@
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{
-/***/ "+iuc":
-/***/ (function(module, exports, __webpack_require__) {
-
-__webpack_require__("wgeU");
-__webpack_require__("FlQf");
-__webpack_require__("bBy9");
-__webpack_require__("B9jh");
-__webpack_require__("dL40");
-__webpack_require__("xvv9");
-__webpack_require__("V+O7");
-module.exports = __webpack_require__("WEpk").Set;
-
-
-/***/ }),
-
/***/ "+oT+":
/***/ (function(module, exports, __webpack_require__) {
@@ -69,28 +54,6 @@ __webpack_require__("cHUd")('Map');
/***/ }),
-/***/ "B9jh":
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var strong = __webpack_require__("Wu5q");
-var validate = __webpack_require__("n3ko");
-var SET = 'Set';
-
-// 23.2 Set Objects
-module.exports = __webpack_require__("raTm")(SET, function (get) {
- return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); };
-}, {
- // 23.2.3.1 Set.prototype.add(value)
- add: function add(value) {
- return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value);
- }
-}, strong);
-
-
-/***/ }),
-
/***/ "BMP1":
/***/ (function(module, exports, __webpack_require__) {
@@ -729,15 +692,6 @@ module.exports = __webpack_require__("WEpk").Map;
/***/ }),
-/***/ "V+O7":
-/***/ (function(module, exports, __webpack_require__) {
-
-// https://tc39.github.io/proposal-setmap-offrom/#sec-set.from
-__webpack_require__("aPfg")('Set');
-
-
-/***/ }),
-
/***/ "XLbu":
/***/ (function(module, exports, __webpack_require__) {
@@ -792,17 +746,6 @@ exports.DataManager = DataManager;
/***/ }),
-/***/ "dL40":
-/***/ (function(module, exports, __webpack_require__) {
-
-// https://github.com/DavidBruant/Map-Set.prototype.toJSON
-var $export = __webpack_require__("Y7ZC");
-
-$export($export.P + $export.R, 'Set', { toJSON: __webpack_require__("8iia")('Set') });
-
-
-/***/ }),
-
/***/ "dVTT":
/***/ (function(module, exports, __webpack_require__) {
@@ -878,22 +821,6 @@ exports.DataManagerContext = React.createContext(null);
/***/ }),
-/***/ "ttDY":
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = __webpack_require__("+iuc");
-
-/***/ }),
-
-/***/ "xvv9":
-/***/ (function(module, exports, __webpack_require__) {
-
-// https://tc39.github.io/proposal-setmap-offrom/#sec-set.of
-__webpack_require__("cHUd")('Set');
-
-
-/***/ }),
-
/***/ "zmvN":
/***/ (function(module, exports, __webpack_require__) {
@@ -909,12 +836,10 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+"));
var _promise = _interopRequireDefault(__webpack_require__("eVuF"));
-var _set = _interopRequireDefault(__webpack_require__("ttDY"));
-
var _mitt = _interopRequireDefault(__webpack_require__("kiME"));
var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl"));
-/* global document */
+/* global document, window */
function supportsPreload(el) {
@@ -941,10 +866,23 @@ class PageLoader {
this.buildId = buildId;
this.assetPrefix = assetPrefix;
this.pageCache = {};
- this.prefetchCache = new _set.default();
this.pageRegisterEvents = (0, _mitt.default)();
this.loadingRoutes = {};
this.promisedBuildId = _promise.default.resolve();
+ this.promisedBuildManifest = new _promise.default(resolve => {
+ if (window.__BUILD_MANIFEST) {
+ resolve(window.__BUILD_MANIFEST);
+ } else {
+ window.__BUILD_MANIFEST_CB = () => {
+ resolve(window.__BUILD_MANIFEST);
+ };
+ }
+ });
+ } // Returns a promise for the dependencies for a particular route
+
+
+ getDependencies(route) {
+ return this.promisedBuildManifest.then(man => man[route] && man[route].map(url => "/_next/" + url) || []);
}
normalizeRoute(route) {
@@ -993,12 +931,13 @@ class PageLoader {
if (document.getElementById("__NEXT_PAGE__" + route)) {
return;
- } // Load the script if not asked to load yet.
-
+ }
if (!this.loadingRoutes[route]) {
- this.loadScript(route);
- this.loadingRoutes[route] = true;
+ if (false) {} else {
+ this.loadRoute(route);
+ this.loadingRoutes[route] = true;
+ }
}
});
}
@@ -1023,35 +962,41 @@ class PageLoader {
});
}
- loadScript(route) {
+ loadRoute(route) {
var _this = this;
return (0, _asyncToGenerator2.default)(function* () {
yield _this.promisedBuildId;
route = _this.normalizeRoute(route);
let scriptRoute = route === '/' ? '/index.js' : route + ".js";
- const script = document.createElement('script');
+ const url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute;
- if ( true && 'noModule' in script) {
- script.type = 'module';
- scriptRoute = scriptRoute.replace(/\.js$/, '.module.js');
- }
+ _this.loadScript(url, route, true);
+ })();
+ }
- const url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute;
- script.crossOrigin = "anonymous";
- script.src = url;
+ loadScript(url, route, isPage) {
+ const script = document.createElement('script');
- script.onerror = () => {
- const error = new Error("Error loading script " + url);
- error.code = 'PAGE_LOAD_ERROR';
+ if ( true && 'noModule' in script) {
+ script.type = 'module'; // Only page bundle scripts need to have .module added to url,
+ // dependencies already have it added during build manifest creation
- _this.pageRegisterEvents.emit(route, {
- error
- });
- };
+ if (isPage) url = url.replace(/\.js$/, '.module.js');
+ }
- document.body.appendChild(script);
- })();
+ script.crossOrigin = "anonymous";
+ script.src = url;
+
+ script.onerror = () => {
+ const error = new Error("Error loading script " + url);
+ error.code = 'PAGE_LOAD_ERROR';
+ this.pageRegisterEvents.emit(route, {
+ error
+ });
+ };
+
+ document.body.appendChild(script);
} // This method if called by the route code.
@@ -1085,10 +1030,11 @@ class PageLoader {
register();
}
- prefetch(route) {
+ prefetch(route, isDependency) {
var _this2 = this;
return (0, _asyncToGenerator2.default)(function* () {
+ yield _this2.promisedBuildId;
route = _this2.normalizeRoute(route);
let scriptRoute = (route === '/' ? '/index' : route) + ".js";
@@ -1096,11 +1042,12 @@ class PageLoader {
scriptRoute = scriptRoute.replace(/\.js$/, '.module.js');
}
- if (_this2.prefetchCache.has(scriptRoute) || document.getElementById("__NEXT_PAGE__" + route)) {
- return;
- }
+ const url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; // n.b. If preload is not supported, we fall back to `loadPage` which has
+ // its own deduping mechanism.
- _this2.prefetchCache.add(scriptRoute); // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE
+ if (document.querySelector("link[rel=\"preload\"][href^=\"" + url + "\"]") || document.getElementById("__NEXT_PAGE__" + route)) {
+ return;
+ } // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE
let cn;
@@ -1110,14 +1057,21 @@ class PageLoader {
if ((cn.effectiveType || '').indexOf('2g') !== -1 || cn.saveData) {
return;
}
- } // Feature detection is used to see if preload is supported
+ }
+
+ if (false) {} // Feature detection is used to see if preload is supported
// If not fall back to loading script tags before the page is loaded
// https://caniuse.com/#feat=link-rel-preload
if (hasPreload) {
- yield _this2.promisedBuildId;
- preloadScript(_this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute);
+ preloadScript(url);
+ return;
+ }
+
+ if (isDependency) {
+ // loadPage will automatically handle depencies, so no need to
+ // preload them manually
return;
}
|
Stats from current PRClick to expand stats ✅ Total Bundle Size Decrease ✅
Click to expand serverless stats ✅ Total Bundle Size Decrease ✅
Diff for main.js@@ -1,20 +1,5 @@
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{
-/***/ "+iuc":
-/***/ (function(module, exports, __webpack_require__) {
-
-__webpack_require__("wgeU");
-__webpack_require__("FlQf");
-__webpack_require__("bBy9");
-__webpack_require__("B9jh");
-__webpack_require__("dL40");
-__webpack_require__("xvv9");
-__webpack_require__("V+O7");
-module.exports = __webpack_require__("WEpk").Set;
-
-
-/***/ }),
-
/***/ "+oT+":
/***/ (function(module, exports, __webpack_require__) {
@@ -69,28 +54,6 @@ __webpack_require__("cHUd")('Map');
/***/ }),
-/***/ "B9jh":
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var strong = __webpack_require__("Wu5q");
-var validate = __webpack_require__("n3ko");
-var SET = 'Set';
-
-// 23.2 Set Objects
-module.exports = __webpack_require__("raTm")(SET, function (get) {
- return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); };
-}, {
- // 23.2.3.1 Set.prototype.add(value)
- add: function add(value) {
- return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value);
- }
-}, strong);
-
-
-/***/ }),
-
/***/ "BMP1":
/***/ (function(module, exports, __webpack_require__) {
@@ -919,15 +882,6 @@ module.exports = __webpack_require__("WEpk").Map;
/***/ }),
-/***/ "V+O7":
-/***/ (function(module, exports, __webpack_require__) {
-
-// https://tc39.github.io/proposal-setmap-offrom/#sec-set.from
-__webpack_require__("aPfg")('Set');
-
-
-/***/ }),
-
/***/ "XLbu":
/***/ (function(module, exports, __webpack_require__) {
@@ -995,17 +949,6 @@ exports.DataManager = DataManager;
/***/ }),
-/***/ "dL40":
-/***/ (function(module, exports, __webpack_require__) {
-
-// https://github.com/DavidBruant/Map-Set.prototype.toJSON
-var $export = __webpack_require__("Y7ZC");
-
-$export($export.P + $export.R, 'Set', { toJSON: __webpack_require__("8iia")('Set') });
-
-
-/***/ }),
-
/***/ "dVTT":
/***/ (function(module, exports, __webpack_require__) {
@@ -1083,22 +1026,6 @@ exports.DataManagerContext = React.createContext(null);
/***/ }),
-/***/ "ttDY":
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = __webpack_require__("+iuc");
-
-/***/ }),
-
-/***/ "xvv9":
-/***/ (function(module, exports, __webpack_require__) {
-
-// https://tc39.github.io/proposal-setmap-offrom/#sec-set.of
-__webpack_require__("cHUd")('Set');
-
-
-/***/ }),
-
/***/ "zmvN":
/***/ (function(module, exports, __webpack_require__) {
@@ -1122,12 +1049,10 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+"));
var _promise = _interopRequireDefault(__webpack_require__("eVuF"));
-var _set = _interopRequireDefault(__webpack_require__("ttDY"));
-
var _mitt = _interopRequireDefault(__webpack_require__("kiME"));
var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl"));
-/* global document */
+/* global document, window */
function supportsPreload(el) {
@@ -1157,13 +1082,31 @@ function () {
this.buildId = buildId;
this.assetPrefix = assetPrefix;
this.pageCache = {};
- this.prefetchCache = new _set["default"]();
this.pageRegisterEvents = (0, _mitt["default"])();
this.loadingRoutes = {};
this.promisedBuildId = _promise["default"].resolve();
- }
+ this.promisedBuildManifest = new _promise["default"](function (resolve) {
+ if (window.__BUILD_MANIFEST) {
+ resolve(window.__BUILD_MANIFEST);
+ } else {
+ window.__BUILD_MANIFEST_CB = function () {
+ resolve(window.__BUILD_MANIFEST);
+ };
+ }
+ });
+ } // Returns a promise for the dependencies for a particular route
+
(0, _createClass2["default"])(PageLoader, [{
+ key: "getDependencies",
+ value: function getDependencies(route) {
+ return this.promisedBuildManifest.then(function (man) {
+ return man[route] && man[route].map(function (url) {
+ return "/_next/" + url;
+ }) || [];
+ });
+ }
+ }, {
key: "normalizeRoute",
value: function normalizeRoute(route) {
if (route[0] !== '/') {
@@ -1213,13 +1156,14 @@ function () {
if (document.getElementById("__NEXT_PAGE__" + route)) {
return;
- } // Load the script if not asked to load yet.
-
+ }
if (!_this3.loadingRoutes[route]) {
- _this3.loadScript(route);
+ if (false) {} else {
+ _this3.loadRoute(route);
- _this3.loadingRoutes[route] = true;
+ _this3.loadingRoutes[route] = true;
+ }
}
});
}
@@ -1249,14 +1193,14 @@ function () {
});
}
}, {
- key: "loadScript",
- value: function loadScript(route) {
+ key: "loadRoute",
+ value: function loadRoute(route) {
var _this = this;
return (0, _asyncToGenerator2["default"])(
/*#__PURE__*/
_regenerator["default"].mark(function _callee() {
- var scriptRoute, script, url;
+ var scriptRoute, url;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
@@ -1267,41 +1211,51 @@ function () {
case 2:
route = _this.normalizeRoute(route);
scriptRoute = route === '/' ? '/index.js' : route + ".js";
- script = document.createElement('script');
-
- if ( true && 'noModule' in script) {
- script.type = 'module';
- scriptRoute = scriptRoute.replace(/\.js$/, '.module.js');
- }
-
url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute;
- script.crossOrigin = "anonymous";
- script.src = url;
-
- script.onerror = function () {
- var error = new Error("Error loading script " + url);
- error.code = 'PAGE_LOAD_ERROR';
- _this.pageRegisterEvents.emit(route, {
- error: error
- });
- };
+ _this.loadScript(url, route, true);
- document.body.appendChild(script);
-
- case 11:
+ case 6:
case "end":
return _context.stop();
}
}
}, _callee);
}))();
+ }
+ }, {
+ key: "loadScript",
+ value: function loadScript(url, route, isPage) {
+ var _this5 = this;
+
+ var script = document.createElement('script');
+
+ if ( true && 'noModule' in script) {
+ script.type = 'module'; // Only page bundle scripts need to have .module added to url,
+ // dependencies already have it added during build manifest creation
+
+ if (isPage) url = url.replace(/\.js$/, '.module.js');
+ }
+
+ script.crossOrigin = "anonymous";
+ script.src = url;
+
+ script.onerror = function () {
+ var error = new Error("Error loading script " + url);
+ error.code = 'PAGE_LOAD_ERROR';
+
+ _this5.pageRegisterEvents.emit(route, {
+ error: error
+ });
+ };
+
+ document.body.appendChild(script);
} // This method if called by the route code.
}, {
key: "registerPage",
value: function registerPage(route, regFn) {
- var _this5 = this;
+ var _this6 = this;
var register = function register() {
try {
@@ -1309,21 +1263,21 @@ function () {
error = _regFn.error,
page = _regFn.page;
- _this5.pageCache[route] = {
+ _this6.pageCache[route] = {
error: error,
page: page
};
- _this5.pageRegisterEvents.emit(route, {
+ _this6.pageRegisterEvents.emit(route, {
error: error,
page: page
});
} catch (error) {
- _this5.pageCache[route] = {
+ _this6.pageCache[route] = {
error: error
};
- _this5.pageRegisterEvents.emit(route, {
+ _this6.pageRegisterEvents.emit(route, {
error: error
});
}
@@ -1335,17 +1289,21 @@ function () {
}
}, {
key: "prefetch",
- value: function prefetch(route) {
+ value: function prefetch(route, isDependency) {
var _this2 = this;
return (0, _asyncToGenerator2["default"])(
/*#__PURE__*/
_regenerator["default"].mark(function _callee2() {
- var scriptRoute, cn;
+ var scriptRoute, url, cn;
return _regenerator["default"].wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
+ _context2.next = 2;
+ return _this2.promisedBuildId;
+
+ case 2:
route = _this2.normalizeRoute(route);
scriptRoute = (route === '/' ? '/index' : route) + ".js";
@@ -1353,51 +1311,72 @@ function () {
scriptRoute = scriptRoute.replace(/\.js$/, '.module.js');
}
- if (!(_this2.prefetchCache.has(scriptRoute) || document.getElementById("__NEXT_PAGE__" + route))) {
- _context2.next = 5;
+ url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; // n.b. If preload is not supported, we fall back to `loadPage` which has
+ // its own deduping mechanism.
+
+ if (!(document.querySelector("link[rel=\"preload\"][href^=\"" + url + "\"]") || document.getElementById("__NEXT_PAGE__" + route))) {
+ _context2.next = 8;
break;
}
return _context2.abrupt("return");
- case 5:
- _this2.prefetchCache.add(scriptRoute); // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE
-
-
+ case 8:
if (!(cn = navigator.connection)) {
- _context2.next = 9;
+ _context2.next = 11;
break;
}
if (!((cn.effectiveType || '').indexOf('2g') !== -1 || cn.saveData)) {
- _context2.next = 9;
+ _context2.next = 11;
break;
}
return _context2.abrupt("return");
- case 9:
+ case 11:
+ if (true) {
+ _context2.next = 17;
+ break;
+ }
+
+ ;
+ _context2.next = 15;
+ return _this2.getDependencies(route);
+
+ case 15:
+ _context2.t0 = function (url) {
+ _this2.prefetch(url, true);
+ };
+
+ _context2.sent.forEach(_context2.t0);
+
+ case 17:
if (!hasPreload) {
- _context2.next = 14;
+ _context2.next = 20;
break;
}
- _context2.next = 12;
- return _this2.promisedBuildId;
+ preloadScript(url);
+ return _context2.abrupt("return");
+
+ case 20:
+ if (!isDependency) {
+ _context2.next = 22;
+ break;
+ }
- case 12:
- preloadScript(_this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute);
return _context2.abrupt("return");
- case 14:
+ case 22:
if (!(document.readyState === 'complete')) {
- _context2.next = 18;
+ _context2.next = 26;
break;
}
return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {}));
- case 18:
+ case 26:
return _context2.abrupt("return", new _promise["default"](function (resolve) {
window.addEventListener('load', function () {
_this2.loadPage(route).then(function () {
@@ -1408,7 +1387,7 @@ function () {
});
}));
- case 19:
+ case 27:
case "end":
return _context2.stop();
}
Diff for mainModern.js@@ -1,20 +1,5 @@
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{
-/***/ "+iuc":
-/***/ (function(module, exports, __webpack_require__) {
-
-__webpack_require__("wgeU");
-__webpack_require__("FlQf");
-__webpack_require__("bBy9");
-__webpack_require__("B9jh");
-__webpack_require__("dL40");
-__webpack_require__("xvv9");
-__webpack_require__("V+O7");
-module.exports = __webpack_require__("WEpk").Set;
-
-
-/***/ }),
-
/***/ "+oT+":
/***/ (function(module, exports, __webpack_require__) {
@@ -69,28 +54,6 @@ __webpack_require__("cHUd")('Map');
/***/ }),
-/***/ "B9jh":
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var strong = __webpack_require__("Wu5q");
-var validate = __webpack_require__("n3ko");
-var SET = 'Set';
-
-// 23.2 Set Objects
-module.exports = __webpack_require__("raTm")(SET, function (get) {
- return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); };
-}, {
- // 23.2.3.1 Set.prototype.add(value)
- add: function add(value) {
- return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value);
- }
-}, strong);
-
-
-/***/ }),
-
/***/ "BMP1":
/***/ (function(module, exports, __webpack_require__) {
@@ -729,15 +692,6 @@ module.exports = __webpack_require__("WEpk").Map;
/***/ }),
-/***/ "V+O7":
-/***/ (function(module, exports, __webpack_require__) {
-
-// https://tc39.github.io/proposal-setmap-offrom/#sec-set.from
-__webpack_require__("aPfg")('Set');
-
-
-/***/ }),
-
/***/ "XLbu":
/***/ (function(module, exports, __webpack_require__) {
@@ -792,17 +746,6 @@ exports.DataManager = DataManager;
/***/ }),
-/***/ "dL40":
-/***/ (function(module, exports, __webpack_require__) {
-
-// https://github.com/DavidBruant/Map-Set.prototype.toJSON
-var $export = __webpack_require__("Y7ZC");
-
-$export($export.P + $export.R, 'Set', { toJSON: __webpack_require__("8iia")('Set') });
-
-
-/***/ }),
-
/***/ "dVTT":
/***/ (function(module, exports, __webpack_require__) {
@@ -878,22 +821,6 @@ exports.DataManagerContext = React.createContext(null);
/***/ }),
-/***/ "ttDY":
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = __webpack_require__("+iuc");
-
-/***/ }),
-
-/***/ "xvv9":
-/***/ (function(module, exports, __webpack_require__) {
-
-// https://tc39.github.io/proposal-setmap-offrom/#sec-set.of
-__webpack_require__("cHUd")('Set');
-
-
-/***/ }),
-
/***/ "zmvN":
/***/ (function(module, exports, __webpack_require__) {
@@ -909,12 +836,10 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+"));
var _promise = _interopRequireDefault(__webpack_require__("eVuF"));
-var _set = _interopRequireDefault(__webpack_require__("ttDY"));
-
var _mitt = _interopRequireDefault(__webpack_require__("kiME"));
var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl"));
-/* global document */
+/* global document, window */
function supportsPreload(el) {
@@ -941,10 +866,23 @@ class PageLoader {
this.buildId = buildId;
this.assetPrefix = assetPrefix;
this.pageCache = {};
- this.prefetchCache = new _set.default();
this.pageRegisterEvents = (0, _mitt.default)();
this.loadingRoutes = {};
this.promisedBuildId = _promise.default.resolve();
+ this.promisedBuildManifest = new _promise.default(resolve => {
+ if (window.__BUILD_MANIFEST) {
+ resolve(window.__BUILD_MANIFEST);
+ } else {
+ window.__BUILD_MANIFEST_CB = () => {
+ resolve(window.__BUILD_MANIFEST);
+ };
+ }
+ });
+ } // Returns a promise for the dependencies for a particular route
+
+
+ getDependencies(route) {
+ return this.promisedBuildManifest.then(man => man[route] && man[route].map(url => "/_next/" + url) || []);
}
normalizeRoute(route) {
@@ -993,12 +931,13 @@ class PageLoader {
if (document.getElementById("__NEXT_PAGE__" + route)) {
return;
- } // Load the script if not asked to load yet.
-
+ }
if (!this.loadingRoutes[route]) {
- this.loadScript(route);
- this.loadingRoutes[route] = true;
+ if (false) {} else {
+ this.loadRoute(route);
+ this.loadingRoutes[route] = true;
+ }
}
});
}
@@ -1023,35 +962,41 @@ class PageLoader {
});
}
- loadScript(route) {
+ loadRoute(route) {
var _this = this;
return (0, _asyncToGenerator2.default)(function* () {
yield _this.promisedBuildId;
route = _this.normalizeRoute(route);
let scriptRoute = route === '/' ? '/index.js' : route + ".js";
- const script = document.createElement('script');
+ const url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute;
- if ( true && 'noModule' in script) {
- script.type = 'module';
- scriptRoute = scriptRoute.replace(/\.js$/, '.module.js');
- }
+ _this.loadScript(url, route, true);
+ })();
+ }
- const url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute;
- script.crossOrigin = "anonymous";
- script.src = url;
+ loadScript(url, route, isPage) {
+ const script = document.createElement('script');
- script.onerror = () => {
- const error = new Error("Error loading script " + url);
- error.code = 'PAGE_LOAD_ERROR';
+ if ( true && 'noModule' in script) {
+ script.type = 'module'; // Only page bundle scripts need to have .module added to url,
+ // dependencies already have it added during build manifest creation
- _this.pageRegisterEvents.emit(route, {
- error
- });
- };
+ if (isPage) url = url.replace(/\.js$/, '.module.js');
+ }
- document.body.appendChild(script);
- })();
+ script.crossOrigin = "anonymous";
+ script.src = url;
+
+ script.onerror = () => {
+ const error = new Error("Error loading script " + url);
+ error.code = 'PAGE_LOAD_ERROR';
+ this.pageRegisterEvents.emit(route, {
+ error
+ });
+ };
+
+ document.body.appendChild(script);
} // This method if called by the route code.
@@ -1085,10 +1030,11 @@ class PageLoader {
register();
}
- prefetch(route) {
+ prefetch(route, isDependency) {
var _this2 = this;
return (0, _asyncToGenerator2.default)(function* () {
+ yield _this2.promisedBuildId;
route = _this2.normalizeRoute(route);
let scriptRoute = (route === '/' ? '/index' : route) + ".js";
@@ -1096,11 +1042,12 @@ class PageLoader {
scriptRoute = scriptRoute.replace(/\.js$/, '.module.js');
}
- if (_this2.prefetchCache.has(scriptRoute) || document.getElementById("__NEXT_PAGE__" + route)) {
- return;
- }
+ const url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; // n.b. If preload is not supported, we fall back to `loadPage` which has
+ // its own deduping mechanism.
- _this2.prefetchCache.add(scriptRoute); // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE
+ if (document.querySelector("link[rel=\"preload\"][href^=\"" + url + "\"]") || document.getElementById("__NEXT_PAGE__" + route)) {
+ return;
+ } // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE
let cn;
@@ -1110,14 +1057,21 @@ class PageLoader {
if ((cn.effectiveType || '').indexOf('2g') !== -1 || cn.saveData) {
return;
}
- } // Feature detection is used to see if preload is supported
+ }
+
+ if (false) {} // Feature detection is used to see if preload is supported
// If not fall back to loading script tags before the page is loaded
// https://caniuse.com/#feat=link-rel-preload
if (hasPreload) {
- yield _this2.promisedBuildId;
- preloadScript(_this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute);
+ preloadScript(url);
+ return;
+ }
+
+ if (isDependency) {
+ // loadPage will automatically handle depencies, so no need to
+ // preload them manually
return;
}
|
Stats from current PRClick to expand stats ✅ Total Bundle Size Decrease ✅
Click to expand serverless stats ✅ Total Bundle Size Decrease ✅
Diff for main.js@@ -1,19 +1,4 @@
-(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{
-
-/***/ "+iuc":
-/***/ (function(module, exports, __webpack_require__) {
-
-__webpack_require__("wgeU");
-__webpack_require__("FlQf");
-__webpack_require__("bBy9");
-__webpack_require__("B9jh");
-__webpack_require__("dL40");
-__webpack_require__("xvv9");
-__webpack_require__("V+O7");
-module.exports = __webpack_require__("WEpk").Set;
-
-
-/***/ }),
+(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{
/***/ "+oT+":
/***/ (function(module, exports, __webpack_require__) {
@@ -69,28 +54,6 @@ __webpack_require__("cHUd")('Map');
/***/ }),
-/***/ "B9jh":
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var strong = __webpack_require__("Wu5q");
-var validate = __webpack_require__("n3ko");
-var SET = 'Set';
-
-// 23.2 Set Objects
-module.exports = __webpack_require__("raTm")(SET, function (get) {
- return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); };
-}, {
- // 23.2.3.1 Set.prototype.add(value)
- add: function add(value) {
- return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value);
- }
-}, strong);
-
-
-/***/ }),
-
/***/ "BMP1":
/***/ (function(module, exports, __webpack_require__) {
@@ -919,15 +882,6 @@ module.exports = __webpack_require__("WEpk").Map;
/***/ }),
-/***/ "V+O7":
-/***/ (function(module, exports, __webpack_require__) {
-
-// https://tc39.github.io/proposal-setmap-offrom/#sec-set.from
-__webpack_require__("aPfg")('Set');
-
-
-/***/ }),
-
/***/ "XLbu":
/***/ (function(module, exports, __webpack_require__) {
@@ -995,17 +949,6 @@ exports.DataManager = DataManager;
/***/ }),
-/***/ "dL40":
-/***/ (function(module, exports, __webpack_require__) {
-
-// https://github.com/DavidBruant/Map-Set.prototype.toJSON
-var $export = __webpack_require__("Y7ZC");
-
-$export($export.P + $export.R, 'Set', { toJSON: __webpack_require__("8iia")('Set') });
-
-
-/***/ }),
-
/***/ "dVTT":
/***/ (function(module, exports, __webpack_require__) {
@@ -1083,22 +1026,6 @@ exports.DataManagerContext = React.createContext(null);
/***/ }),
-/***/ "ttDY":
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = __webpack_require__("+iuc");
-
-/***/ }),
-
-/***/ "xvv9":
-/***/ (function(module, exports, __webpack_require__) {
-
-// https://tc39.github.io/proposal-setmap-offrom/#sec-set.of
-__webpack_require__("cHUd")('Set');
-
-
-/***/ }),
-
/***/ "zmvN":
/***/ (function(module, exports, __webpack_require__) {
@@ -1122,12 +1049,10 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+"));
var _promise = _interopRequireDefault(__webpack_require__("eVuF"));
-var _set = _interopRequireDefault(__webpack_require__("ttDY"));
-
var _mitt = _interopRequireDefault(__webpack_require__("kiME"));
var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl"));
-/* global document */
+/* global document, window */
function supportsPreload(el) {
@@ -1157,13 +1082,24 @@ function () {
this.buildId = buildId;
this.assetPrefix = assetPrefix;
this.pageCache = {};
- this.prefetchCache = new _set["default"]();
this.pageRegisterEvents = (0, _mitt["default"])();
this.loadingRoutes = {};
this.promisedBuildId = _promise["default"].resolve();
- }
+
+ if (false) {}
+ } // Returns a promise for the dependencies for a particular route
+
(0, _createClass2["default"])(PageLoader, [{
+ key: "getDependencies",
+ value: function getDependencies(route) {
+ return this.promisedBuildManifest.then(function (man) {
+ return man[route] && man[route].map(function (url) {
+ return "/_next/" + url;
+ }) || [];
+ });
+ }
+ }, {
key: "normalizeRoute",
value: function normalizeRoute(route) {
if (route[0] !== '/') {
@@ -1213,13 +1149,14 @@ function () {
if (document.getElementById("__NEXT_PAGE__" + route)) {
return;
- } // Load the script if not asked to load yet.
-
+ }
if (!_this3.loadingRoutes[route]) {
- _this3.loadScript(route);
+ if (false) {} else {
+ _this3.loadRoute(route);
- _this3.loadingRoutes[route] = true;
+ _this3.loadingRoutes[route] = true;
+ }
}
});
}
@@ -1249,14 +1186,14 @@ function () {
});
}
}, {
- key: "loadScript",
- value: function loadScript(route) {
+ key: "loadRoute",
+ value: function loadRoute(route) {
var _this = this;
return (0, _asyncToGenerator2["default"])(
/*#__PURE__*/
_regenerator["default"].mark(function _callee() {
- var scriptRoute, script, url;
+ var scriptRoute, url;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
@@ -1267,41 +1204,51 @@ function () {
case 2:
route = _this.normalizeRoute(route);
scriptRoute = route === '/' ? '/index.js' : route + ".js";
- script = document.createElement('script');
-
- if ( true && 'noModule' in script) {
- script.type = 'module';
- scriptRoute = scriptRoute.replace(/\.js$/, '.module.js');
- }
-
url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute;
- script.crossOrigin = "anonymous";
- script.src = url;
-
- script.onerror = function () {
- var error = new Error("Error loading script " + url);
- error.code = 'PAGE_LOAD_ERROR';
- _this.pageRegisterEvents.emit(route, {
- error: error
- });
- };
+ _this.loadScript(url, route, true);
- document.body.appendChild(script);
-
- case 11:
+ case 6:
case "end":
return _context.stop();
}
}
}, _callee);
}))();
+ }
+ }, {
+ key: "loadScript",
+ value: function loadScript(url, route, isPage) {
+ var _this5 = this;
+
+ var script = document.createElement('script');
+
+ if ( true && 'noModule' in script) {
+ script.type = 'module'; // Only page bundle scripts need to have .module added to url,
+ // dependencies already have it added during build manifest creation
+
+ if (isPage) url = url.replace(/\.js$/, '.module.js');
+ }
+
+ script.crossOrigin = "anonymous";
+ script.src = url;
+
+ script.onerror = function () {
+ var error = new Error("Error loading script " + url);
+ error.code = 'PAGE_LOAD_ERROR';
+
+ _this5.pageRegisterEvents.emit(route, {
+ error: error
+ });
+ };
+
+ document.body.appendChild(script);
} // This method if called by the route code.
}, {
key: "registerPage",
value: function registerPage(route, regFn) {
- var _this5 = this;
+ var _this6 = this;
var register = function register() {
try {
@@ -1309,21 +1256,21 @@ function () {
error = _regFn.error,
page = _regFn.page;
- _this5.pageCache[route] = {
+ _this6.pageCache[route] = {
error: error,
page: page
};
- _this5.pageRegisterEvents.emit(route, {
+ _this6.pageRegisterEvents.emit(route, {
error: error,
page: page
});
} catch (error) {
- _this5.pageCache[route] = {
+ _this6.pageCache[route] = {
error: error
};
- _this5.pageRegisterEvents.emit(route, {
+ _this6.pageRegisterEvents.emit(route, {
error: error
});
}
@@ -1335,17 +1282,21 @@ function () {
}
}, {
key: "prefetch",
- value: function prefetch(route) {
+ value: function prefetch(route, isDependency) {
var _this2 = this;
return (0, _asyncToGenerator2["default"])(
/*#__PURE__*/
_regenerator["default"].mark(function _callee2() {
- var scriptRoute, cn;
+ var scriptRoute, url, cn;
return _regenerator["default"].wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
+ _context2.next = 2;
+ return _this2.promisedBuildId;
+
+ case 2:
route = _this2.normalizeRoute(route);
scriptRoute = (route === '/' ? '/index' : route) + ".js";
@@ -1353,51 +1304,72 @@ function () {
scriptRoute = scriptRoute.replace(/\.js$/, '.module.js');
}
- if (!(_this2.prefetchCache.has(scriptRoute) || document.getElementById("__NEXT_PAGE__" + route))) {
- _context2.next = 5;
+ url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; // n.b. If preload is not supported, we fall back to `loadPage` which has
+ // its own deduping mechanism.
+
+ if (!(document.querySelector("link[rel=\"preload\"][href^=\"" + url + "\"]") || document.getElementById("__NEXT_PAGE__" + route))) {
+ _context2.next = 8;
break;
}
return _context2.abrupt("return");
- case 5:
- _this2.prefetchCache.add(scriptRoute); // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE
-
-
+ case 8:
if (!(cn = navigator.connection)) {
- _context2.next = 9;
+ _context2.next = 11;
break;
}
if (!((cn.effectiveType || '').indexOf('2g') !== -1 || cn.saveData)) {
- _context2.next = 9;
+ _context2.next = 11;
break;
}
return _context2.abrupt("return");
- case 9:
+ case 11:
+ if (true) {
+ _context2.next = 17;
+ break;
+ }
+
+ ;
+ _context2.next = 15;
+ return _this2.getDependencies(route);
+
+ case 15:
+ _context2.t0 = function (url) {
+ _this2.prefetch(url, true);
+ };
+
+ _context2.sent.forEach(_context2.t0);
+
+ case 17:
if (!hasPreload) {
- _context2.next = 14;
+ _context2.next = 20;
break;
}
- _context2.next = 12;
- return _this2.promisedBuildId;
+ preloadScript(url);
+ return _context2.abrupt("return");
+
+ case 20:
+ if (!isDependency) {
+ _context2.next = 22;
+ break;
+ }
- case 12:
- preloadScript(_this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute);
return _context2.abrupt("return");
- case 14:
+ case 22:
if (!(document.readyState === 'complete')) {
- _context2.next = 18;
+ _context2.next = 26;
break;
}
return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {}));
- case 18:
+ case 26:
return _context2.abrupt("return", new _promise["default"](function (resolve) {
window.addEventListener('load', function () {
_this2.loadPage(route).then(function () {
@@ -1408,7 +1380,7 @@ function () {
});
}));
- case 19:
+ case 27:
case "end":
return _context2.stop();
}
Diff for mainModern.js@@ -1,19 +1,4 @@
-(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{
-
-/***/ "+iuc":
-/***/ (function(module, exports, __webpack_require__) {
-
-__webpack_require__("wgeU");
-__webpack_require__("FlQf");
-__webpack_require__("bBy9");
-__webpack_require__("B9jh");
-__webpack_require__("dL40");
-__webpack_require__("xvv9");
-__webpack_require__("V+O7");
-module.exports = __webpack_require__("WEpk").Set;
-
-
-/***/ }),
+(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{
/***/ "+oT+":
/***/ (function(module, exports, __webpack_require__) {
@@ -69,28 +54,6 @@ __webpack_require__("cHUd")('Map');
/***/ }),
-/***/ "B9jh":
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var strong = __webpack_require__("Wu5q");
-var validate = __webpack_require__("n3ko");
-var SET = 'Set';
-
-// 23.2 Set Objects
-module.exports = __webpack_require__("raTm")(SET, function (get) {
- return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); };
-}, {
- // 23.2.3.1 Set.prototype.add(value)
- add: function add(value) {
- return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value);
- }
-}, strong);
-
-
-/***/ }),
-
/***/ "BMP1":
/***/ (function(module, exports, __webpack_require__) {
@@ -729,15 +692,6 @@ module.exports = __webpack_require__("WEpk").Map;
/***/ }),
-/***/ "V+O7":
-/***/ (function(module, exports, __webpack_require__) {
-
-// https://tc39.github.io/proposal-setmap-offrom/#sec-set.from
-__webpack_require__("aPfg")('Set');
-
-
-/***/ }),
-
/***/ "XLbu":
/***/ (function(module, exports, __webpack_require__) {
@@ -792,17 +746,6 @@ exports.DataManager = DataManager;
/***/ }),
-/***/ "dL40":
-/***/ (function(module, exports, __webpack_require__) {
-
-// https://github.com/DavidBruant/Map-Set.prototype.toJSON
-var $export = __webpack_require__("Y7ZC");
-
-$export($export.P + $export.R, 'Set', { toJSON: __webpack_require__("8iia")('Set') });
-
-
-/***/ }),
-
/***/ "dVTT":
/***/ (function(module, exports, __webpack_require__) {
@@ -878,22 +821,6 @@ exports.DataManagerContext = React.createContext(null);
/***/ }),
-/***/ "ttDY":
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = __webpack_require__("+iuc");
-
-/***/ }),
-
-/***/ "xvv9":
-/***/ (function(module, exports, __webpack_require__) {
-
-// https://tc39.github.io/proposal-setmap-offrom/#sec-set.of
-__webpack_require__("cHUd")('Set');
-
-
-/***/ }),
-
/***/ "zmvN":
/***/ (function(module, exports, __webpack_require__) {
@@ -909,12 +836,10 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("+oT+"));
var _promise = _interopRequireDefault(__webpack_require__("eVuF"));
-var _set = _interopRequireDefault(__webpack_require__("ttDY"));
-
var _mitt = _interopRequireDefault(__webpack_require__("kiME"));
var _unfetch = _interopRequireDefault(__webpack_require__("m/Gl"));
-/* global document */
+/* global document, window */
function supportsPreload(el) {
@@ -941,10 +866,16 @@ class PageLoader {
this.buildId = buildId;
this.assetPrefix = assetPrefix;
this.pageCache = {};
- this.prefetchCache = new _set.default();
this.pageRegisterEvents = (0, _mitt.default)();
this.loadingRoutes = {};
this.promisedBuildId = _promise.default.resolve();
+
+ if (false) {}
+ } // Returns a promise for the dependencies for a particular route
+
+
+ getDependencies(route) {
+ return this.promisedBuildManifest.then(man => man[route] && man[route].map(url => "/_next/" + url) || []);
}
normalizeRoute(route) {
@@ -993,12 +924,13 @@ class PageLoader {
if (document.getElementById("__NEXT_PAGE__" + route)) {
return;
- } // Load the script if not asked to load yet.
-
+ }
if (!this.loadingRoutes[route]) {
- this.loadScript(route);
- this.loadingRoutes[route] = true;
+ if (false) {} else {
+ this.loadRoute(route);
+ this.loadingRoutes[route] = true;
+ }
}
});
}
@@ -1023,35 +955,41 @@ class PageLoader {
});
}
- loadScript(route) {
+ loadRoute(route) {
var _this = this;
return (0, _asyncToGenerator2.default)(function* () {
yield _this.promisedBuildId;
route = _this.normalizeRoute(route);
let scriptRoute = route === '/' ? '/index.js' : route + ".js";
- const script = document.createElement('script');
+ const url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute;
- if ( true && 'noModule' in script) {
- script.type = 'module';
- scriptRoute = scriptRoute.replace(/\.js$/, '.module.js');
- }
+ _this.loadScript(url, route, true);
+ })();
+ }
- const url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute;
- script.crossOrigin = "anonymous";
- script.src = url;
+ loadScript(url, route, isPage) {
+ const script = document.createElement('script');
- script.onerror = () => {
- const error = new Error("Error loading script " + url);
- error.code = 'PAGE_LOAD_ERROR';
+ if ( true && 'noModule' in script) {
+ script.type = 'module'; // Only page bundle scripts need to have .module added to url,
+ // dependencies already have it added during build manifest creation
- _this.pageRegisterEvents.emit(route, {
- error
- });
- };
+ if (isPage) url = url.replace(/\.js$/, '.module.js');
+ }
- document.body.appendChild(script);
- })();
+ script.crossOrigin = "anonymous";
+ script.src = url;
+
+ script.onerror = () => {
+ const error = new Error("Error loading script " + url);
+ error.code = 'PAGE_LOAD_ERROR';
+ this.pageRegisterEvents.emit(route, {
+ error
+ });
+ };
+
+ document.body.appendChild(script);
} // This method if called by the route code.
@@ -1085,10 +1023,11 @@ class PageLoader {
register();
}
- prefetch(route) {
+ prefetch(route, isDependency) {
var _this2 = this;
return (0, _asyncToGenerator2.default)(function* () {
+ yield _this2.promisedBuildId;
route = _this2.normalizeRoute(route);
let scriptRoute = (route === '/' ? '/index' : route) + ".js";
@@ -1096,11 +1035,12 @@ class PageLoader {
scriptRoute = scriptRoute.replace(/\.js$/, '.module.js');
}
- if (_this2.prefetchCache.has(scriptRoute) || document.getElementById("__NEXT_PAGE__" + route)) {
- return;
- }
+ const url = isDependency ? route : _this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute; // n.b. If preload is not supported, we fall back to `loadPage` which has
+ // its own deduping mechanism.
- _this2.prefetchCache.add(scriptRoute); // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE
+ if (document.querySelector("link[rel=\"preload\"][href^=\"" + url + "\"]") || document.getElementById("__NEXT_PAGE__" + route)) {
+ return;
+ } // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE
let cn;
@@ -1110,14 +1050,21 @@ class PageLoader {
if ((cn.effectiveType || '').indexOf('2g') !== -1 || cn.saveData) {
return;
}
- } // Feature detection is used to see if preload is supported
+ }
+
+ if (false) {} // Feature detection is used to see if preload is supported
// If not fall back to loading script tags before the page is loaded
// https://caniuse.com/#feat=link-rel-preload
if (hasPreload) {
- yield _this2.promisedBuildId;
- preloadScript(_this2.assetPrefix + "/_next/static/" + encodeURIComponent(_this2.buildId) + "/pages" + scriptRoute);
+ preloadScript(url);
+ return;
+ }
+
+ if (isDependency) {
+ // loadPage will automatically handle depencies, so no need to
+ // preload them manually
return;
}
|
|
So excited for this 🚀❤️ |
This was referenced Aug 10, 2019
|
Hi, Just wanted to ask, has anyone done any benchmark and see an improvement with this new config? I'd like to explore the same kind of setup for Gatsby, I guess the heuristics make sense for both Next and Gatsby (gatsbyjs/gatsby#16661) |
|
@slorber we are in the process of benchmarking the improvements against https://zeit.co. It will take a few more weeks to get that finished, but we're happy to share. @atcastle can you share the data you have so far? |
|
@stubbornella Hi, any updates? |
|
We tried this feature on our project and discovered some weird problem with css chunks. When loading the page via ssr everything works. When navigating to the page via csr we get following error I checked and bot the name and content of the css chunks are the same in csr and ssr (_next/static/css/1whVq9IAqZiB1lomB8S8Pbp4uA=.14c83442.chunk.css) but chrome somehow complains about the css file when it is loaded via client side render |
Merged
|
@stubbornella just checked with 9.1.2-canary.7 still getting the same error as described above. Is there anything i can do to provide more information for you? |
8 tasks
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR implements the new Webpack SplitChunksPlugin configuration described in #7631 behind a new experimental flag called "granularChunks".
This also refactors the various SplitChunksPlugin configs out of the main config object, as it was getting unwieldy with the introduction of the large new config. However, without enabling the granularChunks flag, this change should have no effect at all on the build.