Adds user timing marks and measures for hydration/render #8069
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
housseindjirdeh
requested review from
ijjk,
lfades,
Timer and
timneutkens
as code owners
Stats from current PRClick to expand stats
|
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 12s | 12.1s | |
node_modules Size |
45.5 MB | 45.5 MB | |
| Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.9 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 |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/link Size |
4.14 kB | 4.17 kB | |
Client pages/link gzip Size |
1.82 kB | 1.83 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 |
19.8 kB | 20.3 kB | |
Client main gzip Size |
6.78 kB | 6.92 kB | |
Client commons Size |
184 kB | 184 kB | ✓ |
Client commons gzip Size |
59.7 kB | 59.7 kB | ✓ |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
| Base Rendered Size | 1.34 kB | 1.34 kB | ✓ |
| Build Dir Size | 699 kB | 740 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 13.5s | 13.3s | -200ms |
node_modules Size |
45.5 MB | 45.5 MB | |
| Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.9 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 |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/link Size |
4.14 kB | 4.17 kB | |
Client pages/link gzip Size |
1.82 kB | 1.83 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 |
19.8 kB | 20.3 kB | |
Client main gzip Size |
6.78 kB | 6.92 kB | |
Client commons Size |
184 kB | 184 kB | ✓ |
Client commons gzip Size |
59.7 kB | 59.7 kB | ✓ |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
Serverless pages/link Size |
251 kB | 338 kB | |
Serverless pages/link gzip Size |
67.6 kB | 86.9 kB | |
Serverless pages/index Size |
243 kB | 329 kB | |
Serverless pages/index gzip Size |
65.3 kB | 84.4 kB | |
Serverless pages/_error Size |
243 kB | 329 kB | |
Serverless pages/_error gzip Size |
65.1 kB | 84.2 kB | |
Serverless pages/routerDirect Size |
244 kB | 330 kB | |
Serverless pages/routerDirect gzip Size |
65.3 kB | 84.4 kB | |
Serverless pages/withRouter Size |
244 kB | 330 kB | |
Serverless pages/withRouter gzip Size |
65.4 kB | 84.4 kB | |
| Build Dir Size | 1.88 MB | 2.27 MB |
timneutkens
reviewed
Jul 24, 2019
Stats from current PRClick to expand stats
|
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 13.1s | 12.8s | -266ms |
node_modules Size |
45.5 MB | 45.4 MB | -30.3 kB |
| Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 67.9 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _error Size |
8.22 kB | 8.45 kB | |
Client _error gzip Size |
3.16 kB | 3.24 kB | |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/link Size |
4.08 kB | 4.14 kB | |
Client pages/link gzip Size |
1.8 kB | 1.82 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 |
20 kB | 20.3 kB | |
Client main gzip Size |
6.86 kB | 6.92 kB | |
Client commons Size |
184 kB | 184 kB | |
Client commons gzip Size |
59.7 kB | 59.7 kB | |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
| Base Rendered Size | 1.35 kB | 1.34 kB | -6 B |
| Build Dir Size | 704 kB | 740 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 13.9s | 14s | |
node_modules Size |
45.5 MB | 45.4 MB | -30.3 kB |
| Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 67.9 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _error Size |
8.22 kB | 8.45 kB | |
Client _error gzip Size |
3.16 kB | 3.24 kB | |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/link Size |
4.08 kB | 4.14 kB | |
Client pages/link gzip Size |
1.8 kB | 1.82 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 |
20 kB | 20.3 kB | |
Client main gzip Size |
6.86 kB | 6.92 kB | |
Client commons Size |
184 kB | 184 kB | |
Client commons gzip Size |
59.7 kB | 59.7 kB | |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
Serverless pages/link Size |
252 kB | 338 kB | |
Serverless pages/link gzip Size |
67.9 kB | 86.9 kB | |
Serverless pages/index Size |
245 kB | 329 kB | |
Serverless pages/index gzip Size |
65.7 kB | 84.5 kB | |
Serverless pages/_error Size |
244 kB | 329 kB | |
Serverless pages/_error gzip Size |
65.5 kB | 84.2 kB | |
Serverless pages/routerDirect Size |
245 kB | 330 kB | |
Serverless pages/routerDirect gzip Size |
65.7 kB | 84.5 kB | |
Serverless pages/withRouter Size |
245 kB | 330 kB | |
Serverless pages/withRouter gzip Size |
65.8 kB | 84.4 kB | |
| Build Dir Size | 1.89 MB | 2.27 MB |
Diff for commons.js
@@ -3193,8 +3193,10 @@ function () {
var _this2 = this;
return new _promise["default"](function (resolve, reject) {
+ performance.mark('linkClick'); // marking route changes as a navigation start entry
// If url and as provided as an object representation,
// we'll format them into the string version here.
+
var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly for the SSR page.
Diff for main.js
@@ -216,22 +216,13 @@ function () {
key: "updateElements",
value: function updateElements(type, components) {
var headEl = document.getElementsByTagName('head')[0];
- var headCountEl = headEl.querySelector('meta[name=next-head-count]');
- var headCount = Number(headCountEl.content);
- var oldTags = [];
-
- for (var i = 0, j = headCountEl.previousElementSibling; i < headCount; i++, j = j.previousElementSibling) {
- if (j.tagName.toLowerCase() === type) {
- oldTags.push(j);
- }
- }
-
+ var oldTags = Array.prototype.slice.call(headEl.querySelectorAll(type + '.next-head'));
var newTags = components.map(reactElementToDOM).filter(function (newTag) {
- for (var k = 0, len = oldTags.length; k < len; k++) {
- var oldTag = oldTags[k];
+ for (var i = 0, len = oldTags.length; i < len; i++) {
+ var oldTag = oldTags[i];
if (oldTag.isEqualNode(newTag)) {
- oldTags.splice(k, 1);
+ oldTags.splice(i, 1);
return false;
}
}
@@ -242,9 +233,8 @@ function () {
return t.parentNode.removeChild(t);
});
newTags.forEach(function (t) {
- return headEl.insertBefore(t, headCountEl);
+ return headEl.appendChild(t);
});
- headCountEl.content = (headCount - oldTags.length + newTags.length).toString();
}
}]);
return HeadManager;
@@ -769,16 +759,40 @@ function _renderError() {
var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
function renderReactElement(reactEl, domEl) {
+ performance.mark('beforeRender'); // mark start of hydrate/render
// The check for `.hydrate` is there to support React alternatives like preact
+
if (isInitialRender) {
- _reactDom["default"].hydrate(reactEl, domEl);
+ _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
isInitialRender = false;
} else {
- _reactDom["default"].render(reactEl, domEl);
+ _reactDom["default"].render(reactEl, domEl, markRenderComplete);
}
}
+function markHydrateComplete() {
+ performance.mark('afterHydrate'); // mark end of hydration
+
+ performance.measure('Next.js-before-hydration', null, 'beforeRender');
+ performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+ clearMarks();
+}
+
+function markRenderComplete() {
+ performance.mark('afterRender'); // mark end of render
+
+ var navStartEntries = performance.getEntriesByName('linkClick', 'mark');
+ performance.measure('Next.js-nav-to-render', navStartEntries[0].name, 'beforeRender');
+ performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+ clearMarks();
+}
+
+function clearMarks() {
+ performance.clearMarks();
+ performance.clearMeasures();
+}
+
function AppContainer(_ref4) {
var children = _ref4.children;
return _react["default"].createElement(Container, {
@@ -1262,9 +1276,6 @@ function () {
route = _this.normalizeRoute(route);
scriptRoute = route === '/' ? '/index.js' : route + ".js";
script = document.createElement('script');
-
- if (false) {}
-
url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute;
script.crossOrigin = undefined;
script.src = url;
@@ -1280,7 +1291,7 @@ function () {
document.body.appendChild(script);
- case 11:
+ case 10:
case "end":
return _context.stop();
}
@@ -1340,42 +1351,40 @@ function () {
route = _this2.normalizeRoute(route);
scriptRoute = (route === '/' ? '/index' : route) + ".js";
- if (false) {}
-
if (!(_this2.prefetchCache.has(scriptRoute) || document.getElementById("__NEXT_PAGE__" + route))) {
- _context2.next = 5;
+ _context2.next = 4;
break;
}
return _context2.abrupt("return");
- case 5:
+ case 4:
_this2.prefetchCache.add(scriptRoute); // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE
// Don't prefetch if the user is on 2G / Don't prefetch if Save-Data is enabled
if (!('connection' in navigator)) {
- _context2.next = 9;
+ _context2.next = 8;
break;
}
if (!((navigator.connection.effectiveType || '').indexOf('2g') !== -1 || navigator.connection.saveData)) {
- _context2.next = 9;
+ _context2.next = 8;
break;
}
return _context2.abrupt("return");
- case 9:
+ case 8:
if (!hasPreload) {
- _context2.next = 19;
+ _context2.next = 18;
break;
}
- _context2.next = 12;
+ _context2.next = 11;
return _this2.promisedBuildId;
- case 12:
+ case 11:
link = document.createElement('link');
link.rel = 'preload';
link.crossOrigin = undefined;
@@ -1384,15 +1393,15 @@ function () {
document.head.appendChild(link);
return _context2.abrupt("return");
- case 19:
+ case 18:
if (!(document.readyState === 'complete')) {
- _context2.next = 23;
+ _context2.next = 22;
break;
}
return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {}));
- case 23:
+ case 22:
return _context2.abrupt("return", new _promise["default"](function (resolve) {
window.addEventListener('load', function () {
_this2.loadPage(route).then(function () {
@@ -1403,7 +1412,7 @@ function () {
});
}));
- case 24:
+ case 23:
case "end":
return _context2.stop();
}
Stats from current PRClick to expand stats
|
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 13.6s | 13.3s | -262ms |
node_modules Size |
45.5 MB | 45.5 MB | |
| Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | -1 B |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 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 | 300 B | -1 B |
Client main Size |
20 kB | 20.5 kB | |
Client main gzip Size |
6.86 kB | 7 kB | |
Client commons Size |
184 kB | 184 kB | |
Client commons gzip Size |
59.7 kB | 59.7 kB | |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
| Base Rendered Size | 1.35 kB | 1.35 kB | ✓ |
| Build Dir Size | 704 kB | 706 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 14.3s | 14.7s | |
node_modules Size |
45.5 MB | 45.5 MB | |
| Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 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 |
20 kB | 20.5 kB | |
Client main gzip Size |
6.86 kB | 7 kB | |
Client commons Size |
184 kB | 184 kB | |
Client commons gzip Size |
59.7 kB | 59.7 kB | |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
Serverless pages/link Size |
252 kB | 252 kB | |
Serverless pages/link gzip Size |
67.9 kB | 68 kB | |
Serverless pages/index Size |
245 kB | 245 kB | |
Serverless pages/index gzip Size |
65.7 kB | 65.8 kB | |
Serverless pages/_error Size |
244 kB | 244 kB | |
Serverless pages/_error gzip Size |
65.5 kB | 65.5 kB | |
Serverless pages/routerDirect Size |
245 kB | 245 kB | |
Serverless pages/routerDirect gzip Size |
65.7 kB | 65.7 kB | |
Serverless pages/withRouter Size |
245 kB | 245 kB | |
Serverless pages/withRouter gzip Size |
65.8 kB | 65.9 kB | |
| Build Dir Size | 1.89 MB | 1.9 MB |
Diff for commons.js
@@ -3193,8 +3193,10 @@ function () {
var _this2 = this;
return new _promise["default"](function (resolve, reject) {
+ performance.mark('linkClick'); // marking route changes as a navigation start entry
// If url and as provided as an object representation,
// we'll format them into the string version here.
+
var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly for the SSR page.
Diff for main.js
@@ -1,4 +1,4 @@
-(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{
+(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{
/***/ "+iuc":
/***/ (function(module, exports, __webpack_require__) {
@@ -769,16 +769,40 @@ function _renderError() {
var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
function renderReactElement(reactEl, domEl) {
+ performance.mark('beforeRender'); // mark start of hydrate/render
// The check for `.hydrate` is there to support React alternatives like preact
+
if (isInitialRender) {
- _reactDom["default"].hydrate(reactEl, domEl);
+ _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
isInitialRender = false;
} else {
- _reactDom["default"].render(reactEl, domEl);
+ _reactDom["default"].render(reactEl, domEl, markRenderComplete);
}
}
+function markHydrateComplete() {
+ performance.mark('afterHydrate'); // mark end of hydration
+
+ performance.measure('Next.js-before-hydration', null, 'beforeRender');
+ performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+ clearMarks();
+}
+
+function markRenderComplete() {
+ performance.mark('afterRender'); // mark end of render
+
+ var navStartEntries = performance.getEntriesByName('linkClick', 'mark');
+ performance.measure('Next.js-nav-to-render', navStartEntries[0].name, 'beforeRender');
+ performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+ clearMarks();
+}
+
+function clearMarks() {
+ performance.clearMarks();
+ performance.clearMeasures();
+}
+
function AppContainer(_ref4) {
var children = _ref4.children;
return _react["default"].createElement(Container, {
Stats from current PRClick to expand stats
|
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 13.1s | 12.8s | -236ms |
node_modules Size |
45.9 MB | 45.5 MB | -376 kB |
| Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 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 |
15.4 kB | 20.5 kB | |
Client main gzip Size |
5.33 kB | 7.01 kB | |
Client commons Size |
188 kB | 184 kB | -4.53 kB |
Client commons gzip Size |
61.1 kB | 59.7 kB | -1.43 kB |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
| Base Rendered Size | 1.35 kB | 1.35 kB | ✓ |
| Build Dir Size | 705 kB | 706 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 14.3s | 14.5s | |
node_modules Size |
45.9 MB | 45.5 MB | -376 kB |
| Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 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 |
15.4 kB | 20.5 kB | |
Client main gzip Size |
5.33 kB | 7.01 kB | |
Client commons Size |
188 kB | 184 kB | -4.53 kB |
Client commons gzip Size |
61.1 kB | 59.7 kB | -1.43 kB |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
Serverless pages/link Size |
252 kB | 252 kB | -133 B |
Serverless pages/link gzip Size |
68 kB | 68 kB | -9 B |
Serverless pages/index Size |
245 kB | 245 kB | -133 B |
Serverless pages/index gzip Size |
65.8 kB | 65.8 kB | -6 B |
Serverless pages/_error Size |
244 kB | 244 kB | -133 B |
Serverless pages/_error gzip Size |
65.5 kB | 65.5 kB | -8 B |
Serverless pages/routerDirect Size |
246 kB | 245 kB | -133 B |
Serverless pages/routerDirect gzip Size |
65.7 kB | 65.7 kB | -6 B |
Serverless pages/withRouter Size |
245 kB | 245 kB | -133 B |
Serverless pages/withRouter gzip Size |
65.9 kB | 65.9 kB | -7 B |
| Build Dir Size | 1.89 MB | 1.9 MB |
Diff for commons.js
@@ -21,35 +21,6 @@ module.exports = __webpack_require__("WEpk").Object.getPrototypeOf;
/***/ }),
-/***/ "+wdc":
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/** @license React v0.13.6
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-Object.defineProperty(exports,"__esModule",{value:!0});var d=null,e=!1,g=3,k=-1,l=-1,m=!1,n=!1;function p(){if(!m){var a=d.expirationTime;n?q():n=!0;r(t,a)}}
-function u(){var a=d,b=d.next;if(d===b)d=null;else{var c=d.previous;d=c.next=b;b.previous=c}a.next=a.previous=null;c=a.callback;b=a.expirationTime;a=a.priorityLevel;var f=g,Q=l;g=a;l=b;try{var h=c()}finally{g=f,l=Q}if("function"===typeof h)if(h={callback:h,priorityLevel:a,expirationTime:b,next:null,previous:null},null===d)d=h.next=h.previous=h;else{c=null;a=d;do{if(a.expirationTime>=b){c=a;break}a=a.next}while(a!==d);null===c?c=d:c===d&&(d=h,p());b=c.previous;b.next=c.previous=h;h.next=c;h.previous=
-b}}function v(){if(-1===k&&null!==d&&1===d.priorityLevel){m=!0;try{do u();while(null!==d&&1===d.priorityLevel)}finally{m=!1,null!==d?p():n=!1}}}function t(a){m=!0;var b=e;e=a;try{if(a)for(;null!==d;){var c=exports.unstable_now();if(d.expirationTime<=c){do u();while(null!==d&&d.expirationTime<=c)}else break}else if(null!==d){do u();while(null!==d&&!w())}}finally{m=!1,e=b,null!==d?p():n=!1,v()}}
-var x=Date,y="function"===typeof setTimeout?setTimeout:void 0,z="function"===typeof clearTimeout?clearTimeout:void 0,A="function"===typeof requestAnimationFrame?requestAnimationFrame:void 0,B="function"===typeof cancelAnimationFrame?cancelAnimationFrame:void 0,C,D;function E(a){C=A(function(b){z(D);a(b)});D=y(function(){B(C);a(exports.unstable_now())},100)}
-if("object"===typeof performance&&"function"===typeof performance.now){var F=performance;exports.unstable_now=function(){return F.now()}}else exports.unstable_now=function(){return x.now()};var r,q,w,G=null; true?G=window:undefined;
-if(G&&G._schedMock){var H=G._schedMock;r=H[0];q=H[1];w=H[2];exports.unstable_now=H[3]}else if( false||"function"!==typeof MessageChannel){var I=null,J=function(a){if(null!==I)try{I(a)}finally{I=null}};r=function(a){null!==I?setTimeout(r,0,a):(I=a,setTimeout(J,0,!1))};q=function(){I=null};w=function(){return!1}}else{"undefined"!==typeof console&&("function"!==typeof A&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"),
-"function"!==typeof B&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var K=null,L=!1,M=-1,N=!1,O=!1,P=0,R=33,S=33;w=function(){return P<=exports.unstable_now()};var T=new MessageChannel,U=T.port2;T.port1.onmessage=function(){L=!1;var a=K,b=M;K=null;M=-1;var c=exports.unstable_now(),f=!1;if(0>=P-c)if(-1!==b&&b<=c)f=!0;else{N||(N=!0,E(V));K=a;M=b;return}if(null!==a){O=!0;try{a(f)}finally{O=!1}}};
-var V=function(a){if(null!==K){E(V);var b=a-P+S;b<S&&R<S?(8>b&&(b=8),S=b<R?R:b):R=b;P=a+S;L||(L=!0,U.postMessage(void 0))}else N=!1};r=function(a,b){K=a;M=b;O||0>b?U.postMessage(void 0):N||(N=!0,E(V))};q=function(){K=null;L=!1;M=-1}}exports.unstable_ImmediatePriority=1;exports.unstable_UserBlockingPriority=2;exports.unstable_NormalPriority=3;exports.unstable_IdlePriority=5;exports.unstable_LowPriority=4;
-exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=g,f=k;g=a;k=exports.unstable_now();try{return b()}finally{g=c,k=f,v()}};exports.unstable_next=function(a){switch(g){case 1:case 2:case 3:var b=3;break;default:b=g}var c=g,f=k;g=b;k=exports.unstable_now();try{return a()}finally{g=c,k=f,v()}};
-exports.unstable_scheduleCallback=function(a,b){var c=-1!==k?k:exports.unstable_now();if("object"===typeof b&&null!==b&&"number"===typeof b.timeout)b=c+b.timeout;else switch(g){case 1:b=c+-1;break;case 2:b=c+250;break;case 5:b=c+1073741823;break;case 4:b=c+1E4;break;default:b=c+5E3}a={callback:a,priorityLevel:g,expirationTime:b,next:null,previous:null};if(null===d)d=a.next=a.previous=a,p();else{c=null;var f=d;do{if(f.expirationTime>b){c=f;break}f=f.next}while(f!==d);null===c?c=d:c===d&&(d=a,p());
-b=c.previous;b.next=c.previous=a;a.next=c;a.previous=b}return a};exports.unstable_cancelCallback=function(a){var b=a.next;if(null!==b){if(b===a)d=null;else{a===d&&(d=b);var c=a.previous;c.next=b;b.previous=c}a.next=a.previous=null}};exports.unstable_wrapCallback=function(a){var b=g;return function(){var c=g,f=k;g=b;k=exports.unstable_now();try{return a.apply(this,arguments)}finally{g=c,k=f,v()}}};exports.unstable_getCurrentPriorityLevel=function(){return g};
-exports.unstable_shouldYield=function(){return!e&&(null!==d&&d.expirationTime<l||w())};exports.unstable_continueExecution=function(){null!==d&&p()};exports.unstable_pauseExecution=function(){};exports.unstable_getFirstCallbackNode=function(){return d};
-
-
-/***/ }),
-
/***/ "/eQG":
/***/ (function(module, exports, __webpack_require__) {
@@ -3222,8 +3193,10 @@ function () {
var _this2 = this;
return new _promise["default"](function (resolve, reject) {
+ performance.mark('routeChange'); // marking route changes as a navigation start entry
// If url and as provided as an object representation,
// we'll format them into the string version here.
+
var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly for the SSR page.
@@ -4244,19 +4217,6 @@ $export($export.S, 'Promise', { 'try': function (callbackfn) {
/***/ }),
-/***/ "QCnb":
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-if (true) {
- module.exports = __webpack_require__("+wdc");
-} else {}
-
-
-/***/ }),
-
/***/ "QMMT":
/***/ (function(module, exports, __webpack_require__) {
Diff for main.js
@@ -60,6 +60,35 @@ module.exports = _asyncToGenerator;
/***/ }),
+/***/ "+wdc":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/** @license React v0.13.6
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+Object.defineProperty(exports,"__esModule",{value:!0});var d=null,e=!1,g=3,k=-1,l=-1,m=!1,n=!1;function p(){if(!m){var a=d.expirationTime;n?q():n=!0;r(t,a)}}
+function u(){var a=d,b=d.next;if(d===b)d=null;else{var c=d.previous;d=c.next=b;b.previous=c}a.next=a.previous=null;c=a.callback;b=a.expirationTime;a=a.priorityLevel;var f=g,Q=l;g=a;l=b;try{var h=c()}finally{g=f,l=Q}if("function"===typeof h)if(h={callback:h,priorityLevel:a,expirationTime:b,next:null,previous:null},null===d)d=h.next=h.previous=h;else{c=null;a=d;do{if(a.expirationTime>=b){c=a;break}a=a.next}while(a!==d);null===c?c=d:c===d&&(d=h,p());b=c.previous;b.next=c.previous=h;h.next=c;h.previous=
+b}}function v(){if(-1===k&&null!==d&&1===d.priorityLevel){m=!0;try{do u();while(null!==d&&1===d.priorityLevel)}finally{m=!1,null!==d?p():n=!1}}}function t(a){m=!0;var b=e;e=a;try{if(a)for(;null!==d;){var c=exports.unstable_now();if(d.expirationTime<=c){do u();while(null!==d&&d.expirationTime<=c)}else break}else if(null!==d){do u();while(null!==d&&!w())}}finally{m=!1,e=b,null!==d?p():n=!1,v()}}
+var x=Date,y="function"===typeof setTimeout?setTimeout:void 0,z="function"===typeof clearTimeout?clearTimeout:void 0,A="function"===typeof requestAnimationFrame?requestAnimationFrame:void 0,B="function"===typeof cancelAnimationFrame?cancelAnimationFrame:void 0,C,D;function E(a){C=A(function(b){z(D);a(b)});D=y(function(){B(C);a(exports.unstable_now())},100)}
+if("object"===typeof performance&&"function"===typeof performance.now){var F=performance;exports.unstable_now=function(){return F.now()}}else exports.unstable_now=function(){return x.now()};var r,q,w,G=null; true?G=window:undefined;
+if(G&&G._schedMock){var H=G._schedMock;r=H[0];q=H[1];w=H[2];exports.unstable_now=H[3]}else if( false||"function"!==typeof MessageChannel){var I=null,J=function(a){if(null!==I)try{I(a)}finally{I=null}};r=function(a){null!==I?setTimeout(r,0,a):(I=a,setTimeout(J,0,!1))};q=function(){I=null};w=function(){return!1}}else{"undefined"!==typeof console&&("function"!==typeof A&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"),
+"function"!==typeof B&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var K=null,L=!1,M=-1,N=!1,O=!1,P=0,R=33,S=33;w=function(){return P<=exports.unstable_now()};var T=new MessageChannel,U=T.port2;T.port1.onmessage=function(){L=!1;var a=K,b=M;K=null;M=-1;var c=exports.unstable_now(),f=!1;if(0>=P-c)if(-1!==b&&b<=c)f=!0;else{N||(N=!0,E(V));K=a;M=b;return}if(null!==a){O=!0;try{a(f)}finally{O=!1}}};
+var V=function(a){if(null!==K){E(V);var b=a-P+S;b<S&&R<S?(8>b&&(b=8),S=b<R?R:b):R=b;P=a+S;L||(L=!0,U.postMessage(void 0))}else N=!1};r=function(a,b){K=a;M=b;O||0>b?U.postMessage(void 0):N||(N=!0,E(V))};q=function(){K=null;L=!1;M=-1}}exports.unstable_ImmediatePriority=1;exports.unstable_UserBlockingPriority=2;exports.unstable_NormalPriority=3;exports.unstable_IdlePriority=5;exports.unstable_LowPriority=4;
+exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=g,f=k;g=a;k=exports.unstable_now();try{return b()}finally{g=c,k=f,v()}};exports.unstable_next=function(a){switch(g){case 1:case 2:case 3:var b=3;break;default:b=g}var c=g,f=k;g=b;k=exports.unstable_now();try{return a()}finally{g=c,k=f,v()}};
+exports.unstable_scheduleCallback=function(a,b){var c=-1!==k?k:exports.unstable_now();if("object"===typeof b&&null!==b&&"number"===typeof b.timeout)b=c+b.timeout;else switch(g){case 1:b=c+-1;break;case 2:b=c+250;break;case 5:b=c+1073741823;break;case 4:b=c+1E4;break;default:b=c+5E3}a={callback:a,priorityLevel:g,expirationTime:b,next:null,previous:null};if(null===d)d=a.next=a.previous=a,p();else{c=null;var f=d;do{if(f.expirationTime>b){c=f;break}f=f.next}while(f!==d);null===c?c=d:c===d&&(d=a,p());
+b=c.previous;b.next=c.previous=a;a.next=c;a.previous=b}return a};exports.unstable_cancelCallback=function(a){var b=a.next;if(null!==b){if(b===a)d=null;else{a===d&&(d=b);var c=a.previous;c.next=b;b.previous=c}a.next=a.previous=null}};exports.unstable_wrapCallback=function(a){var b=g;return function(){var c=g,f=k;g=b;k=exports.unstable_now();try{return a.apply(this,arguments)}finally{g=c,k=f,v()}}};exports.unstable_getCurrentPriorityLevel=function(){return g};
+exports.unstable_shouldYield=function(){return!e&&(null!==d&&d.expirationTime<l||w())};exports.unstable_continueExecution=function(){null!==d&&p()};exports.unstable_pauseExecution=function(){};exports.unstable_getFirstCallbackNode=function(){return d};
+
+
+/***/ }),
+
/***/ "/h46":
/***/ (function(module, exports, __webpack_require__) {
@@ -740,16 +769,45 @@ function _renderError() {
var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
function renderReactElement(reactEl, domEl) {
+ performance.mark('beforeRender'); // mark start of hydrate/render
// The check for `.hydrate` is there to support React alternatives like preact
+
if (isInitialRender) {
- _reactDom["default"].hydrate(reactEl, domEl);
+ _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
isInitialRender = false;
} else {
- _reactDom["default"].render(reactEl, domEl);
+ _reactDom["default"].render(reactEl, domEl, markRenderComplete);
}
}
+function markHydrateComplete() {
+ performance.mark('afterHydrate'); // mark end of hydration
+
+ performance.measure('Next.js-before-hydration', null, 'beforeRender');
+ performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+ clearMarks();
+}
+
+function markRenderComplete() {
+ performance.mark('afterRender'); // mark end of render
+
+ var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+ if (!navStartEntries.length) {
+ return;
+ }
+
+ performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+ performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+ clearMarks();
+}
+
+function clearMarks() {
+ performance.clearMarks();
+ performance.clearMeasures();
+}
+
function AppContainer(_ref4) {
var children = _ref4.children;
return _react["default"].createElement(Container, {
@@ -860,6 +918,19 @@ module.exports = __webpack_require__("HohS")
/***/ }),
+/***/ "QCnb":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+if (true) {
+ module.exports = __webpack_require__("+wdc");
+} else {}
+
+
+/***/ }),
+
/***/ "UDep":
/***/ (function(module, exports, __webpack_require__) {
Stats from current PRClick to expand stats
|
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 11.8s | 11.9s | |
node_modules Size |
45.9 MB | 45.5 MB | -376 kB |
| Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 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 |
15.4 kB | 20.5 kB | |
Client main gzip Size |
5.33 kB | 7.01 kB | |
Client commons Size |
188 kB | 184 kB | -4.53 kB |
Client commons gzip Size |
61.1 kB | 59.7 kB | -1.43 kB |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
| Base Rendered Size | 1.35 kB | 1.35 kB | ✓ |
| Build Dir Size | 705 kB | 706 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 13.1s | 12.6s | -462ms |
node_modules Size |
45.9 MB | 45.5 MB | -376 kB |
| Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 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 |
15.4 kB | 20.5 kB | |
Client main gzip Size |
5.33 kB | 7.01 kB | |
Client commons Size |
188 kB | 184 kB | -4.53 kB |
Client commons gzip Size |
61.1 kB | 59.7 kB | -1.43 kB |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
Serverless pages/link Size |
252 kB | 252 kB | -133 B |
Serverless pages/link gzip Size |
68 kB | 68 kB | -8 B |
Serverless pages/index Size |
245 kB | 245 kB | -133 B |
Serverless pages/index gzip Size |
65.8 kB | 65.8 kB | -7 B |
Serverless pages/_error Size |
244 kB | 244 kB | -133 B |
Serverless pages/_error gzip Size |
65.5 kB | 65.5 kB | -7 B |
Serverless pages/routerDirect Size |
246 kB | 245 kB | -133 B |
Serverless pages/routerDirect gzip Size |
65.7 kB | 65.7 kB | -6 B |
Serverless pages/withRouter Size |
245 kB | 245 kB | -133 B |
Serverless pages/withRouter gzip Size |
65.9 kB | 65.9 kB | -6 B |
| Build Dir Size | 1.89 MB | 1.9 MB |
Diff for commons.js
@@ -21,35 +21,6 @@ module.exports = __webpack_require__("WEpk").Object.getPrototypeOf;
/***/ }),
-/***/ "+wdc":
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/** @license React v0.13.6
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-Object.defineProperty(exports,"__esModule",{value:!0});var d=null,e=!1,g=3,k=-1,l=-1,m=!1,n=!1;function p(){if(!m){var a=d.expirationTime;n?q():n=!0;r(t,a)}}
-function u(){var a=d,b=d.next;if(d===b)d=null;else{var c=d.previous;d=c.next=b;b.previous=c}a.next=a.previous=null;c=a.callback;b=a.expirationTime;a=a.priorityLevel;var f=g,Q=l;g=a;l=b;try{var h=c()}finally{g=f,l=Q}if("function"===typeof h)if(h={callback:h,priorityLevel:a,expirationTime:b,next:null,previous:null},null===d)d=h.next=h.previous=h;else{c=null;a=d;do{if(a.expirationTime>=b){c=a;break}a=a.next}while(a!==d);null===c?c=d:c===d&&(d=h,p());b=c.previous;b.next=c.previous=h;h.next=c;h.previous=
-b}}function v(){if(-1===k&&null!==d&&1===d.priorityLevel){m=!0;try{do u();while(null!==d&&1===d.priorityLevel)}finally{m=!1,null!==d?p():n=!1}}}function t(a){m=!0;var b=e;e=a;try{if(a)for(;null!==d;){var c=exports.unstable_now();if(d.expirationTime<=c){do u();while(null!==d&&d.expirationTime<=c)}else break}else if(null!==d){do u();while(null!==d&&!w())}}finally{m=!1,e=b,null!==d?p():n=!1,v()}}
-var x=Date,y="function"===typeof setTimeout?setTimeout:void 0,z="function"===typeof clearTimeout?clearTimeout:void 0,A="function"===typeof requestAnimationFrame?requestAnimationFrame:void 0,B="function"===typeof cancelAnimationFrame?cancelAnimationFrame:void 0,C,D;function E(a){C=A(function(b){z(D);a(b)});D=y(function(){B(C);a(exports.unstable_now())},100)}
-if("object"===typeof performance&&"function"===typeof performance.now){var F=performance;exports.unstable_now=function(){return F.now()}}else exports.unstable_now=function(){return x.now()};var r,q,w,G=null; true?G=window:undefined;
-if(G&&G._schedMock){var H=G._schedMock;r=H[0];q=H[1];w=H[2];exports.unstable_now=H[3]}else if( false||"function"!==typeof MessageChannel){var I=null,J=function(a){if(null!==I)try{I(a)}finally{I=null}};r=function(a){null!==I?setTimeout(r,0,a):(I=a,setTimeout(J,0,!1))};q=function(){I=null};w=function(){return!1}}else{"undefined"!==typeof console&&("function"!==typeof A&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"),
-"function"!==typeof B&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var K=null,L=!1,M=-1,N=!1,O=!1,P=0,R=33,S=33;w=function(){return P<=exports.unstable_now()};var T=new MessageChannel,U=T.port2;T.port1.onmessage=function(){L=!1;var a=K,b=M;K=null;M=-1;var c=exports.unstable_now(),f=!1;if(0>=P-c)if(-1!==b&&b<=c)f=!0;else{N||(N=!0,E(V));K=a;M=b;return}if(null!==a){O=!0;try{a(f)}finally{O=!1}}};
-var V=function(a){if(null!==K){E(V);var b=a-P+S;b<S&&R<S?(8>b&&(b=8),S=b<R?R:b):R=b;P=a+S;L||(L=!0,U.postMessage(void 0))}else N=!1};r=function(a,b){K=a;M=b;O||0>b?U.postMessage(void 0):N||(N=!0,E(V))};q=function(){K=null;L=!1;M=-1}}exports.unstable_ImmediatePriority=1;exports.unstable_UserBlockingPriority=2;exports.unstable_NormalPriority=3;exports.unstable_IdlePriority=5;exports.unstable_LowPriority=4;
-exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=g,f=k;g=a;k=exports.unstable_now();try{return b()}finally{g=c,k=f,v()}};exports.unstable_next=function(a){switch(g){case 1:case 2:case 3:var b=3;break;default:b=g}var c=g,f=k;g=b;k=exports.unstable_now();try{return a()}finally{g=c,k=f,v()}};
-exports.unstable_scheduleCallback=function(a,b){var c=-1!==k?k:exports.unstable_now();if("object"===typeof b&&null!==b&&"number"===typeof b.timeout)b=c+b.timeout;else switch(g){case 1:b=c+-1;break;case 2:b=c+250;break;case 5:b=c+1073741823;break;case 4:b=c+1E4;break;default:b=c+5E3}a={callback:a,priorityLevel:g,expirationTime:b,next:null,previous:null};if(null===d)d=a.next=a.previous=a,p();else{c=null;var f=d;do{if(f.expirationTime>b){c=f;break}f=f.next}while(f!==d);null===c?c=d:c===d&&(d=a,p());
-b=c.previous;b.next=c.previous=a;a.next=c;a.previous=b}return a};exports.unstable_cancelCallback=function(a){var b=a.next;if(null!==b){if(b===a)d=null;else{a===d&&(d=b);var c=a.previous;c.next=b;b.previous=c}a.next=a.previous=null}};exports.unstable_wrapCallback=function(a){var b=g;return function(){var c=g,f=k;g=b;k=exports.unstable_now();try{return a.apply(this,arguments)}finally{g=c,k=f,v()}}};exports.unstable_getCurrentPriorityLevel=function(){return g};
-exports.unstable_shouldYield=function(){return!e&&(null!==d&&d.expirationTime<l||w())};exports.unstable_continueExecution=function(){null!==d&&p()};exports.unstable_pauseExecution=function(){};exports.unstable_getFirstCallbackNode=function(){return d};
-
-
-/***/ }),
-
/***/ "/eQG":
/***/ (function(module, exports, __webpack_require__) {
@@ -3222,8 +3193,10 @@ function () {
var _this2 = this;
return new _promise["default"](function (resolve, reject) {
+ performance.mark('routeChange'); // marking route changes as a navigation start entry
// If url and as provided as an object representation,
// we'll format them into the string version here.
+
var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly for the SSR page.
@@ -4244,19 +4217,6 @@ $export($export.S, 'Promise', { 'try': function (callbackfn) {
/***/ }),
-/***/ "QCnb":
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-if (true) {
- module.exports = __webpack_require__("+wdc");
-} else {}
-
-
-/***/ }),
-
/***/ "QMMT":
/***/ (function(module, exports, __webpack_require__) {
Diff for main.js
@@ -60,6 +60,35 @@ module.exports = _asyncToGenerator;
/***/ }),
+/***/ "+wdc":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/** @license React v0.13.6
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+Object.defineProperty(exports,"__esModule",{value:!0});var d=null,e=!1,g=3,k=-1,l=-1,m=!1,n=!1;function p(){if(!m){var a=d.expirationTime;n?q():n=!0;r(t,a)}}
+function u(){var a=d,b=d.next;if(d===b)d=null;else{var c=d.previous;d=c.next=b;b.previous=c}a.next=a.previous=null;c=a.callback;b=a.expirationTime;a=a.priorityLevel;var f=g,Q=l;g=a;l=b;try{var h=c()}finally{g=f,l=Q}if("function"===typeof h)if(h={callback:h,priorityLevel:a,expirationTime:b,next:null,previous:null},null===d)d=h.next=h.previous=h;else{c=null;a=d;do{if(a.expirationTime>=b){c=a;break}a=a.next}while(a!==d);null===c?c=d:c===d&&(d=h,p());b=c.previous;b.next=c.previous=h;h.next=c;h.previous=
+b}}function v(){if(-1===k&&null!==d&&1===d.priorityLevel){m=!0;try{do u();while(null!==d&&1===d.priorityLevel)}finally{m=!1,null!==d?p():n=!1}}}function t(a){m=!0;var b=e;e=a;try{if(a)for(;null!==d;){var c=exports.unstable_now();if(d.expirationTime<=c){do u();while(null!==d&&d.expirationTime<=c)}else break}else if(null!==d){do u();while(null!==d&&!w())}}finally{m=!1,e=b,null!==d?p():n=!1,v()}}
+var x=Date,y="function"===typeof setTimeout?setTimeout:void 0,z="function"===typeof clearTimeout?clearTimeout:void 0,A="function"===typeof requestAnimationFrame?requestAnimationFrame:void 0,B="function"===typeof cancelAnimationFrame?cancelAnimationFrame:void 0,C,D;function E(a){C=A(function(b){z(D);a(b)});D=y(function(){B(C);a(exports.unstable_now())},100)}
+if("object"===typeof performance&&"function"===typeof performance.now){var F=performance;exports.unstable_now=function(){return F.now()}}else exports.unstable_now=function(){return x.now()};var r,q,w,G=null; true?G=window:undefined;
+if(G&&G._schedMock){var H=G._schedMock;r=H[0];q=H[1];w=H[2];exports.unstable_now=H[3]}else if( false||"function"!==typeof MessageChannel){var I=null,J=function(a){if(null!==I)try{I(a)}finally{I=null}};r=function(a){null!==I?setTimeout(r,0,a):(I=a,setTimeout(J,0,!1))};q=function(){I=null};w=function(){return!1}}else{"undefined"!==typeof console&&("function"!==typeof A&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"),
+"function"!==typeof B&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var K=null,L=!1,M=-1,N=!1,O=!1,P=0,R=33,S=33;w=function(){return P<=exports.unstable_now()};var T=new MessageChannel,U=T.port2;T.port1.onmessage=function(){L=!1;var a=K,b=M;K=null;M=-1;var c=exports.unstable_now(),f=!1;if(0>=P-c)if(-1!==b&&b<=c)f=!0;else{N||(N=!0,E(V));K=a;M=b;return}if(null!==a){O=!0;try{a(f)}finally{O=!1}}};
+var V=function(a){if(null!==K){E(V);var b=a-P+S;b<S&&R<S?(8>b&&(b=8),S=b<R?R:b):R=b;P=a+S;L||(L=!0,U.postMessage(void 0))}else N=!1};r=function(a,b){K=a;M=b;O||0>b?U.postMessage(void 0):N||(N=!0,E(V))};q=function(){K=null;L=!1;M=-1}}exports.unstable_ImmediatePriority=1;exports.unstable_UserBlockingPriority=2;exports.unstable_NormalPriority=3;exports.unstable_IdlePriority=5;exports.unstable_LowPriority=4;
+exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=g,f=k;g=a;k=exports.unstable_now();try{return b()}finally{g=c,k=f,v()}};exports.unstable_next=function(a){switch(g){case 1:case 2:case 3:var b=3;break;default:b=g}var c=g,f=k;g=b;k=exports.unstable_now();try{return a()}finally{g=c,k=f,v()}};
+exports.unstable_scheduleCallback=function(a,b){var c=-1!==k?k:exports.unstable_now();if("object"===typeof b&&null!==b&&"number"===typeof b.timeout)b=c+b.timeout;else switch(g){case 1:b=c+-1;break;case 2:b=c+250;break;case 5:b=c+1073741823;break;case 4:b=c+1E4;break;default:b=c+5E3}a={callback:a,priorityLevel:g,expirationTime:b,next:null,previous:null};if(null===d)d=a.next=a.previous=a,p();else{c=null;var f=d;do{if(f.expirationTime>b){c=f;break}f=f.next}while(f!==d);null===c?c=d:c===d&&(d=a,p());
+b=c.previous;b.next=c.previous=a;a.next=c;a.previous=b}return a};exports.unstable_cancelCallback=function(a){var b=a.next;if(null!==b){if(b===a)d=null;else{a===d&&(d=b);var c=a.previous;c.next=b;b.previous=c}a.next=a.previous=null}};exports.unstable_wrapCallback=function(a){var b=g;return function(){var c=g,f=k;g=b;k=exports.unstable_now();try{return a.apply(this,arguments)}finally{g=c,k=f,v()}}};exports.unstable_getCurrentPriorityLevel=function(){return g};
+exports.unstable_shouldYield=function(){return!e&&(null!==d&&d.expirationTime<l||w())};exports.unstable_continueExecution=function(){null!==d&&p()};exports.unstable_pauseExecution=function(){};exports.unstable_getFirstCallbackNode=function(){return d};
+
+
+/***/ }),
+
/***/ "/h46":
/***/ (function(module, exports, __webpack_require__) {
@@ -740,16 +769,45 @@ function _renderError() {
var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
function renderReactElement(reactEl, domEl) {
+ performance.mark('beforeRender'); // mark start of hydrate/render
// The check for `.hydrate` is there to support React alternatives like preact
+
if (isInitialRender) {
- _reactDom["default"].hydrate(reactEl, domEl);
+ _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
isInitialRender = false;
} else {
- _reactDom["default"].render(reactEl, domEl);
+ _reactDom["default"].render(reactEl, domEl, markRenderComplete);
}
}
+function markHydrateComplete() {
+ performance.mark('afterHydrate'); // mark end of hydration
+
+ performance.measure('Next.js-before-hydration', null, 'beforeRender');
+ performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+ clearMarks();
+}
+
+function markRenderComplete() {
+ performance.mark('afterRender'); // mark end of render
+
+ var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+ if (!navStartEntries.length) {
+ return;
+ }
+
+ performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+ performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+ clearMarks();
+}
+
+function clearMarks() {
+ performance.clearMarks();
+ performance.clearMeasures();
+}
+
function AppContainer(_ref4) {
var children = _ref4.children;
return _react["default"].createElement(Container, {
@@ -860,6 +918,19 @@ module.exports = __webpack_require__("HohS")
/***/ }),
+/***/ "QCnb":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+if (true) {
+ module.exports = __webpack_require__("+wdc");
+} else {}
+
+
+/***/ }),
+
/***/ "UDep":
/***/ (function(module, exports, __webpack_require__) {
Stats from current PRClick to expand stats
|
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 12.2s | 12.4s | |
node_modules Size |
45.9 MB | 45.9 MB | |
| Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 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 |
300 B | 301 B | |
Client main Size |
15.4 kB | 16 kB | |
Client main gzip Size |
5.33 kB | 5.48 kB | |
Client commons Size |
188 kB | 188 kB | |
Client commons gzip Size |
61.1 kB | 61.2 kB | |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
| Base Rendered Size | 1.35 kB | 1.35 kB | ✓ |
| Build Dir Size | 705 kB | 707 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 13.2s | 13.5s | |
node_modules Size |
45.9 MB | 45.9 MB | |
| Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 68 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 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 |
15.4 kB | 16 kB | |
Client main gzip Size |
5.33 kB | 5.48 kB | |
Client commons Size |
188 kB | 188 kB | |
Client commons gzip Size |
61.1 kB | 61.2 kB | |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
Serverless pages/link Size |
252 kB | 252 kB | |
Serverless pages/link gzip Size |
68 kB | 68 kB | |
Serverless pages/index Size |
245 kB | 245 kB | |
Serverless pages/index gzip Size |
65.8 kB | 65.8 kB | |
Serverless pages/_error Size |
244 kB | 245 kB | |
Serverless pages/_error gzip Size |
65.5 kB | 65.6 kB | |
Serverless pages/routerDirect Size |
246 kB | 246 kB | |
Serverless pages/routerDirect gzip Size |
65.7 kB | 65.8 kB | |
Serverless pages/withRouter Size |
245 kB | 246 kB | |
Serverless pages/withRouter gzip Size |
65.9 kB | 65.9 kB | |
| Build Dir Size | 1.89 MB | 1.9 MB |
Diff for commons.js
@@ -3222,8 +3222,10 @@ function () {
var _this2 = this;
return new _promise["default"](function (resolve, reject) {
+ performance.mark('routeChange'); // marking route changes as a navigation start entry
// If url and as provided as an object representation,
// we'll format them into the string version here.
+
var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly for the SSR page.
Diff for main.js
@@ -740,16 +740,45 @@ function _renderError() {
var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
function renderReactElement(reactEl, domEl) {
+ performance.mark('beforeRender'); // mark start of hydrate/render
// The check for `.hydrate` is there to support React alternatives like preact
+
if (isInitialRender) {
- _reactDom["default"].hydrate(reactEl, domEl);
+ _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
isInitialRender = false;
} else {
- _reactDom["default"].render(reactEl, domEl);
+ _reactDom["default"].render(reactEl, domEl, markRenderComplete);
}
}
+function markHydrateComplete() {
+ performance.mark('afterHydrate'); // mark end of hydration
+
+ performance.measure('Next.js-before-hydration', null, 'beforeRender');
+ performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+ clearMarks();
+}
+
+function markRenderComplete() {
+ performance.mark('afterRender'); // mark end of render
+
+ var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+ if (!navStartEntries.length) {
+ return;
+ }
+
+ performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+ performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+ clearMarks();
+}
+
+function clearMarks() {
+ performance.clearMarks();
+ performance.clearMeasures();
+}
+
function AppContainer(_ref4) {
var children = _ref4.children;
return _react["default"].createElement(Container, {
Stats from current PRClick to expand stats
|
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 13.8s | 13.3s | -494ms |
node_modules Size |
45.9 MB | 45.9 MB | |
| Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 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 |
15.6 kB | 16.2 kB | |
Client main gzip Size |
5.39 kB | 5.56 kB | |
Client commons Size |
188 kB | 188 kB | |
Client commons gzip Size |
61.1 kB | 61.1 kB | |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
| Base Rendered Size | 1.35 kB | 1.35 kB | ✓ |
| Build Dir Size | 703 kB | 706 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 14.8s | 14.5s | -266ms |
node_modules Size |
45.9 MB | 45.9 MB | |
| Total Bundle (main, webpack, commons) Size | 206 kB | 207 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 67.9 kB | 68 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | -1 B |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 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 | 300 B | -1 B |
Client main Size |
15.6 kB | 16.2 kB | |
Client main gzip Size |
5.39 kB | 5.56 kB | |
Client commons Size |
188 kB | 188 kB | |
Client commons gzip Size |
61.1 kB | 61.1 kB | |
Client webpack Size |
1.49 kB | 1.49 kB | ✓ |
Client webpack gzip Size |
770 B | 770 B | ✓ |
Serverless pages/link Size |
252 kB | 252 kB | |
Serverless pages/link gzip Size |
67.9 kB | 68 kB | |
Serverless pages/index Size |
244 kB | 244 kB | |
Serverless pages/index gzip Size |
65.8 kB | 65.8 kB | |
Serverless pages/_error Size |
244 kB | 244 kB | |
Serverless pages/_error gzip Size |
65.5 kB | 65.5 kB | |
Serverless pages/routerDirect Size |
245 kB | 245 kB | |
Serverless pages/routerDirect gzip Size |
65.7 kB | 65.7 kB | |
Serverless pages/withRouter Size |
245 kB | 245 kB | |
Serverless pages/withRouter gzip Size |
65.8 kB | 65.9 kB | |
| Build Dir Size | 1.89 MB | 1.89 MB |
Diff for commons.js
@@ -3194,8 +3194,10 @@ function () {
var _this2 = this;
return new _promise["default"](function (resolve, reject) {
+ performance.mark('routeChange'); // marking route changes as a navigation start entry
// If url and as provided as an object representation,
// we'll format them into the string version here.
+
var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly for the SSR page.
Diff for main.js
@@ -746,16 +746,45 @@ function _renderError() {
var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
function renderReactElement(reactEl, domEl) {
+ performance.mark('beforeRender'); // mark start of hydrate/render
// The check for `.hydrate` is there to support React alternatives like preact
+
if (isInitialRender) {
- _reactDom["default"].hydrate(reactEl, domEl);
+ _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
isInitialRender = false;
} else {
- _reactDom["default"].render(reactEl, domEl);
+ _reactDom["default"].render(reactEl, domEl, markRenderComplete);
}
}
+function markHydrateComplete() {
+ performance.mark('afterHydrate'); // mark end of hydration
+
+ performance.measure('Next.js-before-hydration', null, 'beforeRender');
+ performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+ clearMarks();
+}
+
+function markRenderComplete() {
+ performance.mark('afterRender'); // mark end of render
+
+ var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+ if (!navStartEntries.length) {
+ return;
+ }
+
+ performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+ performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+ clearMarks();
+}
+
+function clearMarks() {
+ performance.clearMarks();
+ performance.clearMeasures();
+}
+
function AppContainer(_ref4) {
var children = _ref4.children;
return _react["default"].createElement(Container, {
Stats from current PRClick to expand stats
|
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 13.4s | 13s | -402ms |
node_modules Size |
43.6 MB | 43.6 MB | |
| Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.9 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 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 |
15.4 kB | 16 kB | |
Client main gzip Size |
5.35 kB | 5.51 kB | |
Client commons Size |
188 kB | 188 kB | |
Client commons gzip Size |
61.1 kB | 61.1 kB | |
Client webpack Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack gzip Size |
778 B | 778 B | ✓ |
| Base Rendered Size | 1.35 kB | 1.35 kB | ✓ |
| Build Dir Size | 700 kB | 702 kB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 14.4s | 14.2s | -227ms |
node_modules Size |
43.6 MB | 43.6 MB | |
| Total Bundle (main, webpack, commons) Size | 206 kB | 206 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 67.8 kB | 67.9 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 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 |
15.4 kB | 16 kB | |
Client main gzip Size |
5.35 kB | 5.51 kB | |
Client commons Size |
188 kB | 188 kB | |
Client commons gzip Size |
61.1 kB | 61.1 kB | |
Client webpack Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack gzip Size |
778 B | 778 B | ✓ |
Serverless pages/link Size |
251 kB | 251 kB | |
Serverless pages/link gzip Size |
67.8 kB | 67.8 kB | |
Serverless pages/index Size |
243 kB | 244 kB | |
Serverless pages/index gzip Size |
65.6 kB | 65.6 kB | |
Serverless pages/_error Size |
243 kB | 243 kB | |
Serverless pages/_error gzip Size |
65.3 kB | 65.4 kB | |
Serverless pages/routerDirect Size |
244 kB | 244 kB | |
Serverless pages/routerDirect gzip Size |
65.5 kB | 65.6 kB | |
Serverless pages/withRouter Size |
244 kB | 244 kB | |
Serverless pages/withRouter gzip Size |
65.7 kB | 65.7 kB | |
| Build Dir Size | 1.88 MB | 1.89 MB |
Diff for commons.js
@@ -3194,8 +3194,10 @@ function () {
var _this2 = this;
return new _promise["default"](function (resolve, reject) {
+ performance.mark('routeChange'); // marking route changes as a navigation start entry
// If url and as provided as an object representation,
// we'll format them into the string version here.
+
var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly for the SSR page.
Diff for main.js
@@ -746,16 +746,45 @@ function _renderError() {
var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
function renderReactElement(reactEl, domEl) {
+ performance.mark('beforeRender'); // mark start of hydrate/render
// The check for `.hydrate` is there to support React alternatives like preact
+
if (isInitialRender) {
- _reactDom["default"].hydrate(reactEl, domEl);
+ _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
isInitialRender = false;
} else {
- _reactDom["default"].render(reactEl, domEl);
+ _reactDom["default"].render(reactEl, domEl, markRenderComplete);
}
}
+function markHydrateComplete() {
+ performance.mark('afterHydrate'); // mark end of hydration
+
+ performance.measure('Next.js-before-hydration', null, 'beforeRender');
+ performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+ clearMarks();
+}
+
+function markRenderComplete() {
+ performance.mark('afterRender'); // mark end of render
+
+ var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+ if (!navStartEntries.length) {
+ return;
+ }
+
+ performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+ performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+ clearMarks();
+}
+
+function clearMarks() {
+ performance.clearMarks();
+ performance.clearMeasures();
+}
+
function AppContainer(_ref4) {
var children = _ref4.children;
return _react["default"].createElement(Container, {
developit
reviewed
Aug 6, 2019
Stats from current PRClick to expand stats
|
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 23.1s | 22.2s | -866ms |
node_modules Size |
43.6 MB | 43.6 MB | |
| Total Bundle (main, webpack, commons) Size | 207 kB | 207 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 68.1 kB | 68.3 kB | |
| Total Bundle (main, webpack, commons) Modern Size | 182 kB | 182 kB | |
| Total Bundle (main, webpack, commons) Modern gzip Size | 59.9 kB | 60.1 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _app Modern Size |
1.83 kB | 1.83 kB | ✓ |
Client _app gzip Modern Size |
890 B | 890 B | ✓ |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client _error Modern Size |
5.85 kB | 5.85 kB | ✓ |
Client _error gzip Modern Size |
2.33 kB | 2.33 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/index Modern Size |
319 B | 319 B | ✓ |
Client pages/index gzip Modern Size |
254 B | 254 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 kB | ✓ |
Client pages/link Modern Size |
3.7 kB | 3.7 kB | ✓ |
Client pages/link gzip Modern Size |
1.7 kB | 1.7 kB | ✓ |
Client pages/routerDirect Size |
423 B | 423 B | ✓ |
Client pages/routerDirect gzip Size |
306 B | 306 B | ✓ |
Client pages/routerDirect Modern Size |
411 B | 411 B | ✓ |
Client pages/routerDirect gzip Modern Size |
314 B | 314 B | ✓ |
Client pages/withRouter Size |
435 B | 435 B | ✓ |
Client pages/withRouter gzip Size |
301 B | 301 B | ✓ |
Client pages/withRouter Modern Size |
423 B | 423 B | ✓ |
Client pages/withRouter gzip Modern Size |
309 B | 309 B | ✓ |
Client main Size |
15.8 kB | 16.5 kB | |
Client main gzip Size |
5.46 kB | 5.67 kB | |
Client main Modern Size |
12.8 kB | 13.5 kB | |
Client main Modern gzip Size |
4.83 kB | 5.02 kB | |
Client commons Size |
188 kB | 188 kB | |
Client commons gzip Size |
61.3 kB | 61.3 kB | |
Client commons Modern Size |
169 kB | 169 kB | |
Client commons Modern gzip Size |
55.1 kB | 55.1 kB | |
Client webpack Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack gzip Size |
778 B | 778 B | ✓ |
Client webpack Modern Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack Modern gzip Size |
785 B | 785 B | ✓ |
| Base Rendered Size | 2.76 kB | 2.76 kB | ✓ |
| Build Dir Size | 1.39 MB | 1.4 MB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 23.8s | 24.4s | |
node_modules Size |
43.6 MB | 43.6 MB | |
| Total Bundle (main, webpack, commons) Size | 207 kB | 207 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 68.1 kB | 68.3 kB | |
| Total Bundle (main, webpack, commons) Modern Size | 182 kB | 182 kB | |
| Total Bundle (main, webpack, commons) Modern gzip Size | 59.9 kB | 60.1 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _app Modern Size |
1.83 kB | 1.83 kB | ✓ |
Client _app gzip Modern Size |
890 B | 890 B | ✓ |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client _error Modern Size |
5.85 kB | 5.85 kB | ✓ |
Client _error gzip Modern Size |
2.33 kB | 2.33 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/index Modern Size |
319 B | 319 B | ✓ |
Client pages/index gzip Modern Size |
254 B | 254 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 kB | ✓ |
Client pages/link Modern Size |
3.7 kB | 3.7 kB | ✓ |
Client pages/link gzip Modern Size |
1.7 kB | 1.7 kB | ✓ |
Client pages/routerDirect Size |
423 B | 423 B | ✓ |
Client pages/routerDirect gzip Size |
306 B | 306 B | ✓ |
Client pages/routerDirect Modern Size |
411 B | 411 B | ✓ |
Client pages/routerDirect gzip Modern Size |
314 B | 314 B | ✓ |
Client pages/withRouter Size |
435 B | 435 B | ✓ |
Client pages/withRouter gzip Size |
301 B | 301 B | ✓ |
Client pages/withRouter Modern Size |
423 B | 423 B | ✓ |
Client pages/withRouter gzip Modern Size |
309 B | 309 B | ✓ |
Client main Size |
15.8 kB | 16.5 kB | |
Client main gzip Size |
5.46 kB | 5.67 kB | |
Client main Modern Size |
12.8 kB | 13.5 kB | |
Client main Modern gzip Size |
4.83 kB | 5.02 kB | |
Client commons Size |
188 kB | 188 kB | |
Client commons gzip Size |
61.3 kB | 61.3 kB | |
Client commons Modern Size |
169 kB | 169 kB | |
Client commons Modern gzip Size |
55.1 kB | 55.1 kB | |
Client webpack Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack gzip Size |
778 B | 778 B | ✓ |
Client webpack Modern Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack Modern gzip Size |
785 B | 785 B | ✓ |
Serverless pages/link Size |
255 kB | 255 kB | |
Serverless pages/link gzip Size |
68.6 kB | 68.6 kB | |
Serverless pages/index Size |
248 kB | 248 kB | |
Serverless pages/index gzip Size |
66.4 kB | 66.4 kB | |
Serverless pages/_error Size |
247 kB | 247 kB | |
Serverless pages/_error gzip Size |
66.1 kB | 66.2 kB | |
Serverless pages/routerDirect Size |
248 kB | 248 kB | |
Serverless pages/routerDirect gzip Size |
66.3 kB | 66.4 kB | |
Serverless pages/withRouter Size |
248 kB | 248 kB | |
Serverless pages/withRouter gzip Size |
66.4 kB | 66.5 kB | |
| Build Dir Size | 2.59 MB | 2.6 MB |
Diff for main.js
@@ -771,14 +771,48 @@ function _renderError() {
var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
function renderReactElement(reactEl, domEl) {
- // The check for `.hydrate` is there to support React alternatives like preact
+ // mark start of hydrate/render
+ if (typeof performance !== 'undefined') {
+ performance.mark('beforeRender');
+ } // The check for `.hydrate` is there to support React alternatives like preact
+
+
if (isInitialRender) {
- _reactDom["default"].hydrate(reactEl, domEl);
+ _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
isInitialRender = false;
} else {
- _reactDom["default"].render(reactEl, domEl);
+ _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+ }
+}
+
+function markHydrateComplete() {
+ if (typeof performance === 'undefined') return;
+ performance.mark('afterHydrate'); // mark end of hydration
+
+ performance.measure('Next.js-before-hydration', null, 'beforeRender');
+ performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+ clearMarks();
+}
+
+function markRenderComplete() {
+ if (typeof performance === 'undefined') return;
+ performance.mark('afterRender'); // mark end of render
+
+ var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+ if (!navStartEntries.length) {
+ return;
}
+
+ performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+ performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+ clearMarks();
+}
+
+function clearMarks() {
+ performance.clearMarks();
+ performance.clearMeasures();
}
function AppContainer(_ref4) {
Diff for commons.js
@@ -3194,8 +3194,13 @@ function () {
var _this2 = this;
return new _promise["default"](function (resolve, reject) {
- // If url and as provided as an object representation,
+ // marking route changes as a navigation start entry
+ if (typeof performance !== 'undefined') {
+ performance.mark('routeChange');
+ } // If url and as provided as an object representation,
// we'll format them into the string version here.
+
+
var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly for the SSR page.
Diff for mainModern.js
@@ -599,14 +599,48 @@ function _renderError() {
let isInitialRender = typeof _reactDom.default.hydrate === 'function';
function renderReactElement(reactEl, domEl) {
- // The check for `.hydrate` is there to support React alternatives like preact
+ // mark start of hydrate/render
+ if (typeof performance !== 'undefined') {
+ performance.mark('beforeRender');
+ } // The check for `.hydrate` is there to support React alternatives like preact
+
+
if (isInitialRender) {
- _reactDom.default.hydrate(reactEl, domEl);
+ _reactDom.default.hydrate(reactEl, domEl, markHydrateComplete);
isInitialRender = false;
} else {
- _reactDom.default.render(reactEl, domEl);
+ _reactDom.default.render(reactEl, domEl, markRenderComplete);
+ }
+}
+
+function markHydrateComplete() {
+ if (typeof performance === 'undefined') return;
+ performance.mark('afterHydrate'); // mark end of hydration
+
+ performance.measure('Next.js-before-hydration', null, 'beforeRender');
+ performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+ clearMarks();
+}
+
+function markRenderComplete() {
+ if (typeof performance === 'undefined') return;
+ performance.mark('afterRender'); // mark end of render
+
+ const navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+ if (!navStartEntries.length) {
+ return;
}
+
+ performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+ performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+ clearMarks();
+}
+
+function clearMarks() {
+ performance.clearMarks();
+ performance.clearMeasures();
}
function AppContainer(_ref4) {
Diff for commonsModern.js
@@ -2675,8 +2675,13 @@ class Router {
change(method, _url, _as, options) {
return new _promise.default((resolve, reject) => {
- // If url and as provided as an object representation,
+ // marking route changes as a navigation start entry
+ if (typeof performance !== 'undefined') {
+ performance.mark('routeChange');
+ } // If url and as provided as an object representation,
// we'll format them into the string version here.
+
+
const url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
let as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly for the SSR page.
Stats from current PRClick to expand stats
|
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 22.4s | 22.5s | |
node_modules Size |
43.6 MB | 43.6 MB | |
| Total Bundle (main, webpack, commons) Size | 207 kB | 207 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 68.1 kB | 68.3 kB | |
| Total Bundle (main, webpack, commons) Modern Size | 182 kB | 182 kB | |
| Total Bundle (main, webpack, commons) Modern gzip Size | 59.9 kB | 60.1 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _app Modern Size |
1.83 kB | 1.83 kB | ✓ |
Client _app gzip Modern Size |
890 B | 890 B | ✓ |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client _error Modern Size |
5.85 kB | 5.85 kB | ✓ |
Client _error gzip Modern Size |
2.33 kB | 2.33 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/index Modern Size |
319 B | 319 B | ✓ |
Client pages/index gzip Modern Size |
254 B | 254 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 kB | ✓ |
Client pages/link Modern Size |
3.7 kB | 3.7 kB | ✓ |
Client pages/link gzip Modern Size |
1.7 kB | 1.7 kB | ✓ |
Client pages/routerDirect Size |
423 B | 423 B | ✓ |
Client pages/routerDirect gzip Size |
306 B | 306 B | ✓ |
Client pages/routerDirect Modern Size |
411 B | 411 B | ✓ |
Client pages/routerDirect gzip Modern Size |
314 B | 314 B | ✓ |
Client pages/withRouter Size |
435 B | 435 B | ✓ |
Client pages/withRouter gzip Size |
301 B | 301 B | ✓ |
Client pages/withRouter Modern Size |
423 B | 423 B | ✓ |
Client pages/withRouter gzip Modern Size |
309 B | 309 B | ✓ |
Client main Size |
15.8 kB | 16.5 kB | |
Client main gzip Size |
5.46 kB | 5.67 kB | |
Client main Modern Size |
12.8 kB | 13.5 kB | |
Client main Modern gzip Size |
4.83 kB | 5.02 kB | |
Client commons Size |
188 kB | 188 kB | |
Client commons gzip Size |
61.3 kB | 61.3 kB | |
Client commons Modern Size |
169 kB | 169 kB | |
Client commons Modern gzip Size |
55.1 kB | 55.1 kB | |
Client webpack Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack gzip Size |
778 B | 778 B | ✓ |
Client webpack Modern Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack Modern gzip Size |
785 B | 785 B | ✓ |
| Base Rendered Size | 2.76 kB | 2.76 kB | ✓ |
| Build Dir Size | 1.39 MB | 1.4 MB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 23.9s | 23.2s | -663ms |
node_modules Size |
43.6 MB | 43.6 MB | |
| Total Bundle (main, webpack, commons) Size | 207 kB | 207 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 68.1 kB | 68.3 kB | |
| Total Bundle (main, webpack, commons) Modern Size | 182 kB | 182 kB | |
| Total Bundle (main, webpack, commons) Modern gzip Size | 59.9 kB | 60.1 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _app Modern Size |
1.83 kB | 1.83 kB | ✓ |
Client _app gzip Modern Size |
890 B | 890 B | ✓ |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client _error Modern Size |
5.85 kB | 5.85 kB | ✓ |
Client _error gzip Modern Size |
2.33 kB | 2.33 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/index Modern Size |
319 B | 319 B | ✓ |
Client pages/index gzip Modern Size |
254 B | 254 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 kB | ✓ |
Client pages/link Modern Size |
3.7 kB | 3.7 kB | ✓ |
Client pages/link gzip Modern Size |
1.7 kB | 1.7 kB | ✓ |
Client pages/routerDirect Size |
423 B | 423 B | ✓ |
Client pages/routerDirect gzip Size |
306 B | 306 B | ✓ |
Client pages/routerDirect Modern Size |
411 B | 411 B | ✓ |
Client pages/routerDirect gzip Modern Size |
314 B | 314 B | ✓ |
Client pages/withRouter Size |
435 B | 435 B | ✓ |
Client pages/withRouter gzip Size |
301 B | 301 B | ✓ |
Client pages/withRouter Modern Size |
423 B | 423 B | ✓ |
Client pages/withRouter gzip Modern Size |
309 B | 309 B | ✓ |
Client main Size |
15.8 kB | 16.5 kB | |
Client main gzip Size |
5.46 kB | 5.67 kB | |
Client main Modern Size |
12.8 kB | 13.5 kB | |
Client main Modern gzip Size |
4.83 kB | 5.02 kB | |
Client commons Size |
188 kB | 188 kB | |
Client commons gzip Size |
61.3 kB | 61.3 kB | |
Client commons Modern Size |
169 kB | 169 kB | |
Client commons Modern gzip Size |
55.1 kB | 55.1 kB | |
Client webpack Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack gzip Size |
778 B | 778 B | ✓ |
Client webpack Modern Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack Modern gzip Size |
785 B | 785 B | ✓ |
Serverless pages/link Size |
255 kB | 255 kB | |
Serverless pages/link gzip Size |
68.6 kB | 68.6 kB | |
Serverless pages/index Size |
248 kB | 248 kB | |
Serverless pages/index gzip Size |
66.4 kB | 66.4 kB | |
Serverless pages/_error Size |
247 kB | 247 kB | |
Serverless pages/_error gzip Size |
66.1 kB | 66.2 kB | |
Serverless pages/routerDirect Size |
248 kB | 248 kB | |
Serverless pages/routerDirect gzip Size |
66.3 kB | 66.4 kB | |
Serverless pages/withRouter Size |
248 kB | 248 kB | |
Serverless pages/withRouter gzip Size |
66.4 kB | 66.5 kB | |
| Build Dir Size | 2.59 MB | 2.6 MB |
Diff for main.js
@@ -771,14 +771,48 @@ function _renderError() {
var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
function renderReactElement(reactEl, domEl) {
- // The check for `.hydrate` is there to support React alternatives like preact
+ // mark start of hydrate/render
+ if (typeof performance !== 'undefined') {
+ performance.mark('beforeRender');
+ } // The check for `.hydrate` is there to support React alternatives like preact
+
+
if (isInitialRender) {
- _reactDom["default"].hydrate(reactEl, domEl);
+ _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
isInitialRender = false;
} else {
- _reactDom["default"].render(reactEl, domEl);
+ _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+ }
+}
+
+function markHydrateComplete() {
+ if (typeof performance === 'undefined') return;
+ performance.mark('afterHydrate'); // mark end of hydration
+
+ performance.measure('Next.js-before-hydration', null, 'beforeRender');
+ performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+ clearMarks();
+}
+
+function markRenderComplete() {
+ if (typeof performance === 'undefined') return;
+ performance.mark('afterRender'); // mark end of render
+
+ var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+ if (!navStartEntries.length) {
+ return;
}
+
+ performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+ performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+ clearMarks();
+}
+
+function clearMarks() {
+ performance.clearMarks();
+ performance.clearMeasures();
}
function AppContainer(_ref4) {
Diff for commons.js
@@ -3194,8 +3194,13 @@ function () {
var _this2 = this;
return new _promise["default"](function (resolve, reject) {
- // If url and as provided as an object representation,
+ // marking route changes as a navigation start entry
+ if (typeof performance !== 'undefined') {
+ performance.mark('routeChange');
+ } // If url and as provided as an object representation,
// we'll format them into the string version here.
+
+
var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly for the SSR page.
Diff for mainModern.js
@@ -599,14 +599,48 @@ function _renderError() {
let isInitialRender = typeof _reactDom.default.hydrate === 'function';
function renderReactElement(reactEl, domEl) {
- // The check for `.hydrate` is there to support React alternatives like preact
+ // mark start of hydrate/render
+ if (typeof performance !== 'undefined') {
+ performance.mark('beforeRender');
+ } // The check for `.hydrate` is there to support React alternatives like preact
+
+
if (isInitialRender) {
- _reactDom.default.hydrate(reactEl, domEl);
+ _reactDom.default.hydrate(reactEl, domEl, markHydrateComplete);
isInitialRender = false;
} else {
- _reactDom.default.render(reactEl, domEl);
+ _reactDom.default.render(reactEl, domEl, markRenderComplete);
+ }
+}
+
+function markHydrateComplete() {
+ if (typeof performance === 'undefined') return;
+ performance.mark('afterHydrate'); // mark end of hydration
+
+ performance.measure('Next.js-before-hydration', null, 'beforeRender');
+ performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+ clearMarks();
+}
+
+function markRenderComplete() {
+ if (typeof performance === 'undefined') return;
+ performance.mark('afterRender'); // mark end of render
+
+ const navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+ if (!navStartEntries.length) {
+ return;
}
+
+ performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+ performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+ clearMarks();
+}
+
+function clearMarks() {
+ performance.clearMarks();
+ performance.clearMeasures();
}
function AppContainer(_ref4) {
Diff for commonsModern.js
@@ -2675,8 +2675,13 @@ class Router {
change(method, _url, _as, options) {
return new _promise.default((resolve, reject) => {
- // If url and as provided as an object representation,
+ // marking route changes as a navigation start entry
+ if (typeof performance !== 'undefined') {
+ performance.mark('routeChange');
+ } // If url and as provided as an object representation,
// we'll format them into the string version here.
+
+
const url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
let as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly for the SSR page.
developit
reviewed
Aug 7, 2019
packages/next/client/index.js
Outdated
| @@ -240,13 +240,54 @@ export async function renderError (props) { | |||
| // If hydrate does not exist, eg in preact. | |||
| let isInitialRender = typeof ReactDOM.hydrate === 'function' | |||
| function renderReactElement (reactEl, domEl) { | |||
| // mark start of hydrate/render | |||
| if (typeof performance !== 'undefined') { | |||
There was a problem hiding this comment.
I think we may need to safeguard these further in order to account for browsers like IE11 that have performance.now but not performance.mark, currently they'd throw. Thoughts?
Seems like that could be wrapped into an up-front check:
const SUPPORTS_PERFORMANCE = typeof performance !== 'undefined' && typeof performance.measure === 'function';
// then later
if (SUPPORTS_PERFORMANCE) {
performance.mark('beforeRender');
}There was a problem hiding this comment.
Good call, I added some constants to next-server/utils that does this
(if someone thinks theres a better place to put these constants, please let me know)
Stats from current PRClick to expand stats
|
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 23.1s | 23s | -122ms |
node_modules Size |
43.6 MB | 43.6 MB | |
| Total Bundle (main, webpack, commons) Size | 207 kB | 208 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 68.1 kB | 68.4 kB | |
| Total Bundle (main, webpack, commons) Modern Size | 182 kB | 182 kB | |
| Total Bundle (main, webpack, commons) Modern gzip Size | 59.9 kB | 60.2 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _app Modern Size |
1.83 kB | 1.83 kB | ✓ |
Client _app gzip Modern Size |
890 B | 890 B | ✓ |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client _error Modern Size |
5.85 kB | 5.85 kB | ✓ |
Client _error gzip Modern Size |
2.33 kB | 2.33 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/index Modern Size |
319 B | 319 B | ✓ |
Client pages/index gzip Modern Size |
254 B | 254 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 kB | ✓ |
Client pages/link Modern Size |
3.7 kB | 3.7 kB | ✓ |
Client pages/link gzip Modern Size |
1.7 kB | 1.7 kB | ✓ |
Client pages/routerDirect Size |
423 B | 423 B | ✓ |
Client pages/routerDirect gzip Size |
306 B | 306 B | ✓ |
Client pages/routerDirect Modern Size |
411 B | 411 B | ✓ |
Client pages/routerDirect gzip Modern Size |
314 B | 314 B | ✓ |
Client pages/withRouter Size |
435 B | 435 B | ✓ |
Client pages/withRouter gzip Size |
301 B | 301 B | ✓ |
Client pages/withRouter Modern Size |
423 B | 423 B | ✓ |
Client pages/withRouter gzip Modern Size |
309 B | 309 B | ✓ |
Client main Size |
15.8 kB | 16.5 kB | |
Client main gzip Size |
5.46 kB | 5.7 kB | |
Client main Modern Size |
12.8 kB | 13.5 kB | |
Client main Modern gzip Size |
4.83 kB | 5.04 kB | |
Client commons Size |
188 kB | 188 kB | |
Client commons gzip Size |
61.3 kB | 61.4 kB | |
Client commons Modern Size |
169 kB | 169 kB | |
Client commons Modern gzip Size |
55.1 kB | 55.2 kB | |
Client webpack Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack gzip Size |
778 B | 778 B | ✓ |
Client webpack Modern Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack Modern gzip Size |
785 B | 785 B | ✓ |
| Base Rendered Size | 2.76 kB | 2.76 kB | ✓ |
| Build Dir Size | 1.39 MB | 1.4 MB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 24.6s | 24.6s | -60ms |
node_modules Size |
43.6 MB | 43.6 MB | |
| Total Bundle (main, webpack, commons) Size | 207 kB | 208 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 68.1 kB | 68.4 kB | |
| Total Bundle (main, webpack, commons) Modern Size | 182 kB | 182 kB | |
| Total Bundle (main, webpack, commons) Modern gzip Size | 59.9 kB | 60.2 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _app Modern Size |
1.83 kB | 1.83 kB | ✓ |
Client _app gzip Modern Size |
890 B | 890 B | ✓ |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client _error Modern Size |
5.85 kB | 5.85 kB | ✓ |
Client _error gzip Modern Size |
2.33 kB | 2.33 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/index Modern Size |
319 B | 319 B | ✓ |
Client pages/index gzip Modern Size |
254 B | 254 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 kB | ✓ |
Client pages/link Modern Size |
3.7 kB | 3.7 kB | ✓ |
Client pages/link gzip Modern Size |
1.7 kB | 1.7 kB | ✓ |
Client pages/routerDirect Size |
423 B | 423 B | ✓ |
Client pages/routerDirect gzip Size |
306 B | 306 B | ✓ |
Client pages/routerDirect Modern Size |
411 B | 411 B | ✓ |
Client pages/routerDirect gzip Modern Size |
314 B | 314 B | ✓ |
Client pages/withRouter Size |
435 B | 435 B | ✓ |
Client pages/withRouter gzip Size |
301 B | 301 B | ✓ |
Client pages/withRouter Modern Size |
423 B | 423 B | ✓ |
Client pages/withRouter gzip Modern Size |
309 B | 309 B | ✓ |
Client main Size |
15.8 kB | 16.5 kB | |
Client main gzip Size |
5.46 kB | 5.7 kB | |
Client main Modern Size |
12.8 kB | 13.5 kB | |
Client main Modern gzip Size |
4.83 kB | 5.04 kB | |
Client commons Size |
188 kB | 188 kB | |
Client commons gzip Size |
61.3 kB | 61.4 kB | |
Client commons Modern Size |
169 kB | 169 kB | |
Client commons Modern gzip Size |
55.1 kB | 55.2 kB | |
Client webpack Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack gzip Size |
778 B | 778 B | ✓ |
Client webpack Modern Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack Modern gzip Size |
785 B | 785 B | ✓ |
Serverless pages/link Size |
255 kB | 255 kB | |
Serverless pages/link gzip Size |
68.6 kB | 68.7 kB | |
Serverless pages/index Size |
248 kB | 248 kB | |
Serverless pages/index gzip Size |
66.4 kB | 66.5 kB | |
Serverless pages/_error Size |
247 kB | 248 kB | |
Serverless pages/_error gzip Size |
66.1 kB | 66.3 kB | |
Serverless pages/routerDirect Size |
248 kB | 249 kB | |
Serverless pages/routerDirect gzip Size |
66.3 kB | 66.5 kB | |
Serverless pages/withRouter Size |
248 kB | 249 kB | |
Serverless pages/withRouter gzip Size |
66.4 kB | 66.5 kB | |
| Build Dir Size | 2.59 MB | 2.6 MB |
Diff for main.js
@@ -771,14 +771,48 @@ function _renderError() {
var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
function renderReactElement(reactEl, domEl) {
- // The check for `.hydrate` is there to support React alternatives like preact
+ // mark start of hydrate/render
+ if (_utils.SUPPORTS_PERFORMANCE_USER_TIMING) {
+ performance.mark('beforeRender');
+ } // The check for `.hydrate` is there to support React alternatives like preact
+
+
if (isInitialRender) {
- _reactDom["default"].hydrate(reactEl, domEl);
+ _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
isInitialRender = false;
} else {
- _reactDom["default"].render(reactEl, domEl);
+ _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+ }
+}
+
+function markHydrateComplete() {
+ if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+ performance.mark('afterHydrate'); // mark end of hydration
+
+ performance.measure('Next.js-before-hydration', null, 'beforeRender');
+ performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+ clearMarks();
+}
+
+function markRenderComplete() {
+ if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+ performance.mark('afterRender'); // mark end of render
+
+ var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+ if (!navStartEntries.length) {
+ return;
}
+
+ performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+ performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+ clearMarks();
+}
+
+function clearMarks() {
+ performance.clearMarks();
+ performance.clearMeasures();
}
function AppContainer(_ref4) {
Diff for commons.js
@@ -1242,6 +1242,8 @@ function formatWithValidation(url, options) {
}
exports.formatWithValidation = formatWithValidation;
+exports.SUPPORTS_PERFORMANCE = typeof performance !== 'undefined';
+exports.SUPPORTS_PERFORMANCE_USER_TIMING = exports.SUPPORTS_PERFORMANCE && typeof performance.mark === 'function' && typeof performance.measure === 'function';
/***/ }),
@@ -3194,8 +3196,13 @@ function () {
var _this2 = this;
return new _promise["default"](function (resolve, reject) {
- // If url and as provided as an object representation,
+ // marking route changes as a navigation start entry
+ if (utils_1.SUPPORTS_PERFORMANCE_USER_TIMING) {
+ performance.mark('routeChange');
+ } // If url and as provided as an object representation,
// we'll format them into the string version here.
+
+
var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly for the SSR page.
Diff for mainModern.js
@@ -599,14 +599,48 @@ function _renderError() {
let isInitialRender = typeof _reactDom.default.hydrate === 'function';
function renderReactElement(reactEl, domEl) {
- // The check for `.hydrate` is there to support React alternatives like preact
+ // mark start of hydrate/render
+ if (_utils.SUPPORTS_PERFORMANCE_USER_TIMING) {
+ performance.mark('beforeRender');
+ } // The check for `.hydrate` is there to support React alternatives like preact
+
+
if (isInitialRender) {
- _reactDom.default.hydrate(reactEl, domEl);
+ _reactDom.default.hydrate(reactEl, domEl, markHydrateComplete);
isInitialRender = false;
} else {
- _reactDom.default.render(reactEl, domEl);
+ _reactDom.default.render(reactEl, domEl, markRenderComplete);
+ }
+}
+
+function markHydrateComplete() {
+ if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+ performance.mark('afterHydrate'); // mark end of hydration
+
+ performance.measure('Next.js-before-hydration', null, 'beforeRender');
+ performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+ clearMarks();
+}
+
+function markRenderComplete() {
+ if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+ performance.mark('afterRender'); // mark end of render
+
+ const navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+ if (!navStartEntries.length) {
+ return;
}
+
+ performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+ performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+ clearMarks();
+}
+
+function clearMarks() {
+ performance.clearMarks();
+ performance.clearMeasures();
}
function AppContainer(_ref4) {
Diff for commonsModern.js
@@ -761,6 +761,8 @@ function formatWithValidation(url, options) {
}
exports.formatWithValidation = formatWithValidation;
+exports.SUPPORTS_PERFORMANCE = typeof performance !== 'undefined';
+exports.SUPPORTS_PERFORMANCE_USER_TIMING = exports.SUPPORTS_PERFORMANCE && typeof performance.mark === 'function' && typeof performance.measure === 'function';
/***/ }),
@@ -2675,8 +2677,13 @@ class Router {
change(method, _url, _as, options) {
return new _promise.default((resolve, reject) => {
- // If url and as provided as an object representation,
+ // marking route changes as a navigation start entry
+ if (utils_1.SUPPORTS_PERFORMANCE_USER_TIMING) {
+ performance.mark('routeChange');
+ } // If url and as provided as an object representation,
// we'll format them into the string version here.
+
+
const url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
let as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly for the SSR page.
Stats from current PRClick to expand stats
|
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 19.9s | 20s | |
node_modules Size |
43.6 MB | 43.6 MB | |
| Total Bundle (main, webpack, commons) Size | 207 kB | 208 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 68.1 kB | 68.4 kB | |
| Total Bundle (main, webpack, commons) Modern Size | 182 kB | 182 kB | |
| Total Bundle (main, webpack, commons) Modern gzip Size | 59.9 kB | 60.2 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _app Modern Size |
1.83 kB | 1.83 kB | ✓ |
Client _app gzip Modern Size |
890 B | 890 B | ✓ |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client _error Modern Size |
5.85 kB | 5.85 kB | ✓ |
Client _error gzip Modern Size |
2.33 kB | 2.33 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/index Modern Size |
319 B | 319 B | ✓ |
Client pages/index gzip Modern Size |
254 B | 254 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 kB | ✓ |
Client pages/link Modern Size |
3.7 kB | 3.7 kB | ✓ |
Client pages/link gzip Modern Size |
1.7 kB | 1.7 kB | ✓ |
Client pages/routerDirect Size |
423 B | 423 B | ✓ |
Client pages/routerDirect gzip Size |
306 B | 306 B | ✓ |
Client pages/routerDirect Modern Size |
411 B | 411 B | ✓ |
Client pages/routerDirect gzip Modern Size |
314 B | 314 B | ✓ |
Client pages/withRouter Size |
435 B | 435 B | ✓ |
Client pages/withRouter gzip Size |
301 B | 301 B | ✓ |
Client pages/withRouter Modern Size |
423 B | 423 B | ✓ |
Client pages/withRouter gzip Modern Size |
309 B | 309 B | ✓ |
Client main Size |
15.8 kB | 16.5 kB | |
Client main gzip Size |
5.46 kB | 5.7 kB | |
Client main Modern Size |
12.8 kB | 13.5 kB | |
Client main Modern gzip Size |
4.83 kB | 5.04 kB | |
Client commons Size |
188 kB | 188 kB | |
Client commons gzip Size |
61.3 kB | 61.4 kB | |
Client commons Modern Size |
169 kB | 169 kB | |
Client commons Modern gzip Size |
55.1 kB | 55.2 kB | |
Client webpack Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack gzip Size |
778 B | 778 B | ✓ |
Client webpack Modern Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack Modern gzip Size |
785 B | 785 B | ✓ |
| Base Rendered Size | 2.76 kB | 2.76 kB | ✓ |
| Build Dir Size | 1.39 MB | 1.4 MB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 21s | 21.1s | |
node_modules Size |
43.6 MB | 43.6 MB | |
| Total Bundle (main, webpack, commons) Size | 207 kB | 208 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 68.1 kB | 68.4 kB | |
| Total Bundle (main, webpack, commons) Modern Size | 182 kB | 182 kB | |
| Total Bundle (main, webpack, commons) Modern gzip Size | 59.9 kB | 60.2 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _app Modern Size |
1.83 kB | 1.83 kB | ✓ |
Client _app gzip Modern Size |
890 B | 890 B | ✓ |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client _error Modern Size |
5.85 kB | 5.85 kB | ✓ |
Client _error gzip Modern Size |
2.33 kB | 2.33 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/index Modern Size |
319 B | 319 B | ✓ |
Client pages/index gzip Modern Size |
254 B | 254 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 kB | ✓ |
Client pages/link Modern Size |
3.7 kB | 3.7 kB | ✓ |
Client pages/link gzip Modern Size |
1.7 kB | 1.7 kB | ✓ |
Client pages/routerDirect Size |
423 B | 423 B | ✓ |
Client pages/routerDirect gzip Size |
306 B | 306 B | ✓ |
Client pages/routerDirect Modern Size |
411 B | 411 B | ✓ |
Client pages/routerDirect gzip Modern Size |
314 B | 314 B | ✓ |
Client pages/withRouter Size |
435 B | 435 B | ✓ |
Client pages/withRouter gzip Size |
301 B | 301 B | ✓ |
Client pages/withRouter Modern Size |
423 B | 423 B | ✓ |
Client pages/withRouter gzip Modern Size |
309 B | 309 B | ✓ |
Client main Size |
15.8 kB | 16.5 kB | |
Client main gzip Size |
5.46 kB | 5.7 kB | |
Client main Modern Size |
12.8 kB | 13.5 kB | |
Client main Modern gzip Size |
4.83 kB | 5.04 kB | |
Client commons Size |
188 kB | 188 kB | |
Client commons gzip Size |
61.3 kB | 61.4 kB | |
Client commons Modern Size |
169 kB | 169 kB | |
Client commons Modern gzip Size |
55.1 kB | 55.2 kB | |
Client webpack Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack gzip Size |
778 B | 778 B | ✓ |
Client webpack Modern Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack Modern gzip Size |
785 B | 785 B | ✓ |
Serverless pages/link Size |
255 kB | 255 kB | |
Serverless pages/link gzip Size |
68.6 kB | 68.7 kB | |
Serverless pages/index Size |
248 kB | 248 kB | |
Serverless pages/index gzip Size |
66.4 kB | 66.5 kB | |
Serverless pages/_error Size |
247 kB | 248 kB | |
Serverless pages/_error gzip Size |
66.1 kB | 66.3 kB | |
Serverless pages/routerDirect Size |
248 kB | 249 kB | |
Serverless pages/routerDirect gzip Size |
66.3 kB | 66.5 kB | |
Serverless pages/withRouter Size |
248 kB | 249 kB | |
Serverless pages/withRouter gzip Size |
66.4 kB | 66.5 kB | |
| Build Dir Size | 2.59 MB | 2.6 MB |
Diff for main.js
@@ -771,14 +771,48 @@ function _renderError() {
var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
function renderReactElement(reactEl, domEl) {
- // The check for `.hydrate` is there to support React alternatives like preact
+ // mark start of hydrate/render
+ if (_utils.SUPPORTS_PERFORMANCE_USER_TIMING) {
+ performance.mark('beforeRender');
+ } // The check for `.hydrate` is there to support React alternatives like preact
+
+
if (isInitialRender) {
- _reactDom["default"].hydrate(reactEl, domEl);
+ _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
isInitialRender = false;
} else {
- _reactDom["default"].render(reactEl, domEl);
+ _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+ }
+}
+
+function markHydrateComplete() {
+ if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+ performance.mark('afterHydrate'); // mark end of hydration
+
+ performance.measure('Next.js-before-hydration', null, 'beforeRender');
+ performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+ clearMarks();
+}
+
+function markRenderComplete() {
+ if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+ performance.mark('afterRender'); // mark end of render
+
+ var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+ if (!navStartEntries.length) {
+ return;
}
+
+ performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+ performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+ clearMarks();
+}
+
+function clearMarks() {
+ performance.clearMarks();
+ performance.clearMeasures();
}
function AppContainer(_ref4) {
Diff for commons.js
@@ -1242,6 +1242,8 @@ function formatWithValidation(url, options) {
}
exports.formatWithValidation = formatWithValidation;
+exports.SUPPORTS_PERFORMANCE = typeof performance !== 'undefined';
+exports.SUPPORTS_PERFORMANCE_USER_TIMING = exports.SUPPORTS_PERFORMANCE && typeof performance.mark === 'function' && typeof performance.measure === 'function';
/***/ }),
@@ -3194,8 +3196,13 @@ function () {
var _this2 = this;
return new _promise["default"](function (resolve, reject) {
- // If url and as provided as an object representation,
+ // marking route changes as a navigation start entry
+ if (utils_1.SUPPORTS_PERFORMANCE_USER_TIMING) {
+ performance.mark('routeChange');
+ } // If url and as provided as an object representation,
// we'll format them into the string version here.
+
+
var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly for the SSR page.
Diff for mainModern.js
@@ -599,14 +599,48 @@ function _renderError() {
let isInitialRender = typeof _reactDom.default.hydrate === 'function';
function renderReactElement(reactEl, domEl) {
- // The check for `.hydrate` is there to support React alternatives like preact
+ // mark start of hydrate/render
+ if (_utils.SUPPORTS_PERFORMANCE_USER_TIMING) {
+ performance.mark('beforeRender');
+ } // The check for `.hydrate` is there to support React alternatives like preact
+
+
if (isInitialRender) {
- _reactDom.default.hydrate(reactEl, domEl);
+ _reactDom.default.hydrate(reactEl, domEl, markHydrateComplete);
isInitialRender = false;
} else {
- _reactDom.default.render(reactEl, domEl);
+ _reactDom.default.render(reactEl, domEl, markRenderComplete);
+ }
+}
+
+function markHydrateComplete() {
+ if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+ performance.mark('afterHydrate'); // mark end of hydration
+
+ performance.measure('Next.js-before-hydration', null, 'beforeRender');
+ performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+ clearMarks();
+}
+
+function markRenderComplete() {
+ if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+ performance.mark('afterRender'); // mark end of render
+
+ const navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+ if (!navStartEntries.length) {
+ return;
}
+
+ performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+ performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+ clearMarks();
+}
+
+function clearMarks() {
+ performance.clearMarks();
+ performance.clearMeasures();
}
function AppContainer(_ref4) {
Diff for commonsModern.js
@@ -761,6 +761,8 @@ function formatWithValidation(url, options) {
}
exports.formatWithValidation = formatWithValidation;
+exports.SUPPORTS_PERFORMANCE = typeof performance !== 'undefined';
+exports.SUPPORTS_PERFORMANCE_USER_TIMING = exports.SUPPORTS_PERFORMANCE && typeof performance.mark === 'function' && typeof performance.measure === 'function';
/***/ }),
@@ -2675,8 +2677,13 @@ class Router {
change(method, _url, _as, options) {
return new _promise.default((resolve, reject) => {
- // If url and as provided as an object representation,
+ // marking route changes as a navigation start entry
+ if (utils_1.SUPPORTS_PERFORMANCE_USER_TIMING) {
+ performance.mark('routeChange');
+ } // If url and as provided as an object representation,
// we'll format them into the string version here.
+
+
const url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
let as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly for the SSR page.
…ance as a global to standard
Stats from current PRClick to expand stats
|
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 22.8s | 22.1s | -709ms |
node_modules Size |
43.6 MB | 43.6 MB | |
| Total Bundle (main, webpack, commons) Size | 207 kB | 208 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 68.1 kB | 68.4 kB | |
| Total Bundle (main, webpack, commons) Modern Size | 182 kB | 182 kB | |
| Total Bundle (main, webpack, commons) Modern gzip Size | 59.9 kB | 60.2 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | ✓ |
Client _app Modern Size |
1.83 kB | 1.83 kB | ✓ |
Client _app gzip Modern Size |
890 B | 890 B | ✓ |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client _error Modern Size |
5.85 kB | 5.85 kB | ✓ |
Client _error gzip Modern Size |
2.33 kB | 2.33 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/index Modern Size |
319 B | 319 B | ✓ |
Client pages/index gzip Modern Size |
254 B | 254 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 kB | ✓ |
Client pages/link Modern Size |
3.7 kB | 3.7 kB | ✓ |
Client pages/link gzip Modern Size |
1.7 kB | 1.7 kB | ✓ |
Client pages/routerDirect Size |
423 B | 423 B | ✓ |
Client pages/routerDirect gzip Size |
306 B | 306 B | ✓ |
Client pages/routerDirect Modern Size |
411 B | 411 B | ✓ |
Client pages/routerDirect gzip Modern Size |
314 B | 314 B | ✓ |
Client pages/withRouter Size |
435 B | 435 B | ✓ |
Client pages/withRouter gzip Size |
301 B | 301 B | ✓ |
Client pages/withRouter Modern Size |
423 B | 423 B | ✓ |
Client pages/withRouter gzip Modern Size |
309 B | 309 B | ✓ |
Client main Size |
15.8 kB | 16.5 kB | |
Client main gzip Size |
5.46 kB | 5.7 kB | |
Client main Modern Size |
12.8 kB | 13.5 kB | |
Client main Modern gzip Size |
4.83 kB | 5.04 kB | |
Client commons Size |
188 kB | 188 kB | |
Client commons gzip Size |
61.3 kB | 61.4 kB | |
Client commons Modern Size |
169 kB | 169 kB | |
Client commons Modern gzip Size |
55.1 kB | 55.2 kB | |
Client webpack Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack gzip Size |
778 B | 778 B | ✓ |
Client webpack Modern Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack Modern gzip Size |
785 B | 785 B | ✓ |
| Base Rendered Size | 2.76 kB | 2.76 kB | ✓ |
| Build Dir Size | 1.39 MB | 1.4 MB |
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
| zeit/next.js canary | housseindjirdeh/next.js next-user-timings | Change | |
|---|---|---|---|
| Build Duration | 23.8s | 23.2s | -576ms |
node_modules Size |
43.6 MB | 43.6 MB | |
| Total Bundle (main, webpack, commons) Size | 207 kB | 208 kB | |
| Total Bundle (main, webpack, commons) gzip Size | 68.1 kB | 68.4 kB | |
| Total Bundle (main, webpack, commons) Modern Size | 182 kB | 182 kB | |
| Total Bundle (main, webpack, commons) Modern gzip Size | 59.9 kB | 60.2 kB | |
Client _app Size |
2.39 kB | 2.39 kB | ✓ |
Client _app gzip Size |
1.08 kB | 1.08 kB | |
Client _app Modern Size |
1.83 kB | 1.83 kB | ✓ |
Client _app gzip Modern Size |
890 B | 890 B | ✓ |
Client _error Size |
8.22 kB | 8.22 kB | ✓ |
Client _error gzip Size |
3.16 kB | 3.16 kB | ✓ |
Client _error Modern Size |
5.85 kB | 5.85 kB | ✓ |
Client _error gzip Modern Size |
2.33 kB | 2.33 kB | ✓ |
Client pages/index Size |
343 B | 343 B | ✓ |
Client pages/index gzip Size |
246 B | 246 B | ✓ |
Client pages/index Modern Size |
319 B | 319 B | ✓ |
Client pages/index gzip Modern Size |
254 B | 254 B | ✓ |
Client pages/link Size |
4.08 kB | 4.08 kB | ✓ |
Client pages/link gzip Size |
1.8 kB | 1.8 kB | ✓ |
Client pages/link Modern Size |
3.7 kB | 3.7 kB | ✓ |
Client pages/link gzip Modern Size |
1.7 kB | 1.7 kB | ✓ |
Client pages/routerDirect Size |
423 B | 423 B | ✓ |
Client pages/routerDirect gzip Size |
306 B | 306 B | ✓ |
Client pages/routerDirect Modern Size |
411 B | 411 B | ✓ |
Client pages/routerDirect gzip Modern Size |
314 B | 314 B | ✓ |
Client pages/withRouter Size |
435 B | 435 B | ✓ |
Client pages/withRouter gzip Size |
300 B | 301 B | |
Client pages/withRouter Modern Size |
423 B | 423 B | ✓ |
Client pages/withRouter gzip Modern Size |
309 B | 309 B | ✓ |
Client main Size |
15.8 kB | 16.5 kB | |
Client main gzip Size |
5.46 kB | 5.7 kB | |
Client main Modern Size |
12.8 kB | 13.5 kB | |
Client main Modern gzip Size |
4.83 kB | 5.04 kB | |
Client commons Size |
188 kB | 188 kB | |
Client commons gzip Size |
61.3 kB | 61.4 kB | |
Client commons Modern Size |
169 kB | 169 kB | |
Client commons Modern gzip Size |
55.1 kB | 55.2 kB | |
Client webpack Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack gzip Size |
778 B | 778 B | ✓ |
Client webpack Modern Size |
1.53 kB | 1.53 kB | ✓ |
Client webpack Modern gzip Size |
785 B | 785 B | ✓ |
Serverless pages/link Size |
255 kB | 255 kB | |
Serverless pages/link gzip Size |
68.6 kB | 68.7 kB | |
Serverless pages/index Size |
248 kB | 248 kB | |
Serverless pages/index gzip Size |
66.4 kB | 66.5 kB | |
Serverless pages/_error Size |
247 kB | 248 kB | |
Serverless pages/_error gzip Size |
66.1 kB | 66.3 kB | |
Serverless pages/routerDirect Size |
248 kB | 249 kB | |
Serverless pages/routerDirect gzip Size |
66.3 kB | 66.5 kB | |
Serverless pages/withRouter Size |
248 kB | 249 kB | |
Serverless pages/withRouter gzip Size |
66.4 kB | 66.5 kB | |
| Build Dir Size | 2.59 MB | 2.6 MB |
Diff for main.js
@@ -771,14 +771,48 @@ function _renderError() {
var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
function renderReactElement(reactEl, domEl) {
- // The check for `.hydrate` is there to support React alternatives like preact
+ // mark start of hydrate/render
+ if (_utils.SUPPORTS_PERFORMANCE_USER_TIMING) {
+ performance.mark('beforeRender');
+ } // The check for `.hydrate` is there to support React alternatives like preact
+
+
if (isInitialRender) {
- _reactDom["default"].hydrate(reactEl, domEl);
+ _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
isInitialRender = false;
} else {
- _reactDom["default"].render(reactEl, domEl);
+ _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+ }
+}
+
+function markHydrateComplete() {
+ if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+ performance.mark('afterHydrate'); // mark end of hydration
+
+ performance.measure('Next.js-before-hydration', null, 'beforeRender');
+ performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+ clearMarks();
+}
+
+function markRenderComplete() {
+ if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+ performance.mark('afterRender'); // mark end of render
+
+ var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+ if (!navStartEntries.length) {
+ return;
}
+
+ performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+ performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+ clearMarks();
+}
+
+function clearMarks() {
+ performance.clearMarks();
+ performance.clearMeasures();
}
function AppContainer(_ref4) {
Diff for commons.js
@@ -1242,6 +1242,8 @@ function formatWithValidation(url, options) {
}
exports.formatWithValidation = formatWithValidation;
+exports.SUPPORTS_PERFORMANCE = typeof performance !== 'undefined';
+exports.SUPPORTS_PERFORMANCE_USER_TIMING = exports.SUPPORTS_PERFORMANCE && typeof performance.mark === 'function' && typeof performance.measure === 'function';
/***/ }),
@@ -3194,8 +3196,13 @@ function () {
var _this2 = this;
return new _promise["default"](function (resolve, reject) {
- // If url and as provided as an object representation,
+ // marking route changes as a navigation start entry
+ if (utils_1.SUPPORTS_PERFORMANCE_USER_TIMING) {
+ performance.mark('routeChange');
+ } // If url and as provided as an object representation,
// we'll format them into the string version here.
+
+
var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly for the SSR page.
Diff for mainModern.js
@@ -599,14 +599,48 @@ function _renderError() {
let isInitialRender = typeof _reactDom.default.hydrate === 'function';
function renderReactElement(reactEl, domEl) {
- // The check for `.hydrate` is there to support React alternatives like preact
+ // mark start of hydrate/render
+ if (_utils.SUPPORTS_PERFORMANCE_USER_TIMING) {
+ performance.mark('beforeRender');
+ } // The check for `.hydrate` is there to support React alternatives like preact
+
+
if (isInitialRender) {
- _reactDom.default.hydrate(reactEl, domEl);
+ _reactDom.default.hydrate(reactEl, domEl, markHydrateComplete);
isInitialRender = false;
} else {
- _reactDom.default.render(reactEl, domEl);
+ _reactDom.default.render(reactEl, domEl, markRenderComplete);
+ }
+}
+
+function markHydrateComplete() {
+ if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+ performance.mark('afterHydrate'); // mark end of hydration
+
+ performance.measure('Next.js-before-hydration', null, 'beforeRender');
+ performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+ clearMarks();
+}
+
+function markRenderComplete() {
+ if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+ performance.mark('afterRender'); // mark end of render
+
+ const navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+ if (!navStartEntries.length) {
+ return;
}
+
+ performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+ performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+ clearMarks();
+}
+
+function clearMarks() {
+ performance.clearMarks();
+ performance.clearMeasures();
}
function AppContainer(_ref4) {
Diff for commonsModern.js
@@ -761,6 +761,8 @@ function formatWithValidation(url, options) {
}
exports.formatWithValidation = formatWithValidation;
+exports.SUPPORTS_PERFORMANCE = typeof performance !== 'undefined';
+exports.SUPPORTS_PERFORMANCE_USER_TIMING = exports.SUPPORTS_PERFORMANCE && typeof performance.mark === 'function' && typeof performance.measure === 'function';
/***/ }),
@@ -2675,8 +2677,13 @@ class Router {
change(method, _url, _as, options) {
return new _promise.default((resolve, reject) => {
- // If url and as provided as an object representation,
+ // marking route changes as a navigation start entry
+ if (utils_1.SUPPORTS_PERFORMANCE_USER_TIMING) {
+ performance.mark('routeChange');
+ } // If url and as provided as an object representation,
// we'll format them into the string version here.
+
+
const url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
let as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly for the SSR page.
Timer
approved these changes
Aug 9, 2019
This was referenced Aug 14, 2019
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.
For context, see Issue #8070.
This PR adds user timings for:
With these marks, the following measures are added:
For page loads
Next.js-before-hydration: measures page load to "right before hydration"Next.js-hydration: measures hydration stepFor navigation
Next.js-nav-to-render: measures navigation start to "right before render"Next.js-render: measures hydration stepTesting on a simple example app, hydration aligns with the
hydratemethod in the callstack (and the same forrender)Note: These marks are added for both development and production modes