New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add data attribute to script component #28310
Conversation
@@ -84,6 +84,7 @@ function getPreNextScripts(context: HtmlProps, props: OriginProps) { | |||
key={scriptProps.src || index} | |||
defer={!disableOptimizedLoading} | |||
nonce={props.nonce} | |||
data-nscript="beforeInteractive" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should this be data-nscript={strategy}
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also, this doesn't seem right since its not using next/script
here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For beforeInteractive
we pass the data via context so we can render it during SSR. Only beforeInteractive
scripts are rendered here
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Stats from current PRDefault Build (Increase detected
|
vercel/next.js canary | janicklas-ralph/next.js script | Change | |
---|---|---|---|
buildDuration | 15.4s | 15.6s | |
buildDurationCached | 4s | 3.9s | -66ms |
nodeModulesSize | 61.5 MB | 61.5 MB |
Page Load Tests Overall increase ✓
vercel/next.js canary | janicklas-ralph/next.js script | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 2.772 | 2.796 | |
/ avg req/sec | 901.87 | 894.1 | |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.53 | 1.504 | -0.03 |
/error-in-render avg req/sec | 1634.32 | 1662.53 | +28.21 |
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary | janicklas-ralph/next.js script | Change | |
---|---|---|---|
745.HASH.js gzip | 179 B | 179 B | ✓ |
framework-HASH.js gzip | 42.2 kB | 42.2 kB | ✓ |
main-HASH.js gzip | 23.2 kB | 23.3 kB | |
webpack-HASH.js gzip | 1.45 kB | 1.45 kB | ✓ |
Overall change | 67.1 kB | 67.1 kB |
Legacy Client Bundles (polyfills)
vercel/next.js canary | janicklas-ralph/next.js script | Change | |
---|---|---|---|
polyfills-a4..dd70.js gzip | 31 kB | 31 kB | ✓ |
Overall change | 31 kB | 31 kB | ✓ |
Client Pages
vercel/next.js canary | janicklas-ralph/next.js script | Change | |
---|---|---|---|
_app-HASH.js gzip | 979 B | 979 B | ✓ |
_error-HASH.js gzip | 194 B | 194 B | ✓ |
amp-HASH.js gzip | 312 B | 312 B | ✓ |
css-HASH.js gzip | 329 B | 329 B | ✓ |
dynamic-HASH.js gzip | 2.67 kB | 2.67 kB | ✓ |
head-HASH.js gzip | 351 B | 351 B | ✓ |
hooks-HASH.js gzip | 918 B | 918 B | ✓ |
image-HASH.js gzip | 4.14 kB | 4.14 kB | ✓ |
index-HASH.js gzip | 261 B | 261 B | ✓ |
link-HASH.js gzip | 1.66 kB | 1.66 kB | ✓ |
routerDirect..HASH.js gzip | 318 B | 318 B | ✓ |
script-HASH.js gzip | 387 B | 387 B | ✓ |
withRouter-HASH.js gzip | 320 B | 320 B | ✓ |
bb14e60e810b..30f.css gzip | 125 B | 125 B | ✓ |
Overall change | 13 kB | 13 kB | ✓ |
Client Build Manifests
vercel/next.js canary | janicklas-ralph/next.js script | Change | |
---|---|---|---|
_buildManifest.js gzip | 491 B | 491 B | ✓ |
Overall change | 491 B | 491 B | ✓ |
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary | janicklas-ralph/next.js script | Change | |
---|---|---|---|
index.html gzip | 541 B | 539 B | -2 B |
link.html gzip | 553 B | 552 B | -1 B |
withRouter.html gzip | 534 B | 534 B | ✓ |
Overall change | 1.63 kB | 1.63 kB | -3 B |
Diffs
Diff for main-HASH.js
@@ -3310,6 +3310,9 @@
dangerouslySetInnerHTML = props.dangerouslySetInnerHTML,
_props$children = props.children,
children = _props$children === void 0 ? "" : _props$children,
+ _props$strategy = props.strategy,
+ strategy =
+ _props$strategy === void 0 ? "afterInteractive" : _props$strategy,
onError = props.onError;
var cacheKey = id || src; // Script has already loaded
@@ -3378,13 +3381,14 @@
el.setAttribute(attr, value);
}
+ el.setAttribute("data-nscript", strategy);
document.body.appendChild(el);
};
function handleClientScriptLoad(props) {
- var _props$strategy = props.strategy,
+ var _props$strategy2 = props.strategy,
strategy =
- _props$strategy === void 0 ? "afterInteractive" : _props$strategy;
+ _props$strategy2 === void 0 ? "afterInteractive" : _props$strategy2;
if (strategy === "afterInteractive") {
loadScript(props);
@@ -3421,9 +3425,9 @@
_props$onLoad2 = props.onLoad,
onLoad = _props$onLoad2 === void 0 ? function() {} : _props$onLoad2,
dangerouslySetInnerHTML = props.dangerouslySetInnerHTML,
- _props$strategy2 = props.strategy,
+ _props$strategy3 = props.strategy,
strategy =
- _props$strategy2 === void 0 ? "afterInteractive" : _props$strategy2,
+ _props$strategy3 === void 0 ? "afterInteractive" : _props$strategy3,
onError = props.onError,
restProps = _objectWithoutProperties(props, [
"src",
Diff for index.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-bd462c6df0747808c1c8.js"
+ src="/_next/static/chunks/main-b5c78ac8f0fc7ceb7532.js"
defer=""
></script>
<script
Diff for link.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-bd462c6df0747808c1c8.js"
+ src="/_next/static/chunks/main-b5c78ac8f0fc7ceb7532.js"
defer=""
></script>
<script
Diff for withRouter.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-bd462c6df0747808c1c8.js"
+ src="/_next/static/chunks/main-b5c78ac8f0fc7ceb7532.js"
defer=""
></script>
<script
Webpack 4 Mode (Increase detected ⚠️ )
General Overall increase ⚠️
vercel/next.js canary | janicklas-ralph/next.js script | Change | |
---|---|---|---|
buildDuration | 13s | 13s | |
buildDurationCached | 5.5s | 5.4s | -42ms |
nodeModulesSize | 61.5 MB | 61.5 MB |
Page Load Tests Overall decrease ⚠️
vercel/next.js canary | janicklas-ralph/next.js script | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 2.815 | 2.785 | -0.03 |
/ avg req/sec | 888.09 | 897.62 | +9.53 |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.545 | 1.561 | |
/error-in-render avg req/sec | 1617.9 | 1601.19 |
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary | janicklas-ralph/next.js script | Change | |
---|---|---|---|
16.HASH.js gzip | 186 B | 186 B | ✓ |
677f882d2ed8..HASH.js gzip | 14.1 kB | 14.1 kB | ✓ |
framework.HASH.js gzip | 41.9 kB | 41.9 kB | ✓ |
main-HASH.js gzip | 10.6 kB | 10.6 kB | |
webpack-HASH.js gzip | 1.19 kB | 1.19 kB | ✓ |
Overall change | 68 kB | 68 kB |
Legacy Client Bundles (polyfills)
vercel/next.js canary | janicklas-ralph/next.js script | Change | |
---|---|---|---|
polyfills-a4..dd70.js gzip | 31 kB | 31 kB | ✓ |
Overall change | 31 kB | 31 kB | ✓ |
Client Pages Overall increase ⚠️
vercel/next.js canary | janicklas-ralph/next.js script | Change | |
---|---|---|---|
_app-HASH.js gzip | 964 B | 964 B | ✓ |
_error-HASH.js gzip | 3.8 kB | 3.8 kB | ✓ |
amp-HASH.js gzip | 552 B | 552 B | ✓ |
css-HASH.js gzip | 333 B | 333 B | ✓ |
dynamic-HASH.js gzip | 2.87 kB | 2.87 kB | ✓ |
head-HASH.js gzip | 3.06 kB | 3.06 kB | ✓ |
hooks-HASH.js gzip | 924 B | 924 B | ✓ |
index-HASH.js gzip | 231 B | 231 B | ✓ |
link-HASH.js gzip | 1.64 kB | 1.64 kB | ✓ |
routerDirect..HASH.js gzip | 298 B | 298 B | ✓ |
script-HASH.js gzip | 2.98 kB | 3 kB | |
withRouter-HASH.js gzip | 295 B | 295 B | ✓ |
30809af5c834..565.css gzip | 125 B | 125 B | ✓ |
Overall change | 18.1 kB | 18.1 kB |
Client Build Manifests Overall increase ⚠️
vercel/next.js canary | janicklas-ralph/next.js script | Change | |
---|---|---|---|
_buildManifest.js gzip | 500 B | 501 B | |
Overall change | 500 B | 501 B |
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary | janicklas-ralph/next.js script | Change | |
---|---|---|---|
index.html gzip | 585 B | 586 B | |
link.html gzip | 597 B | 597 B | ✓ |
withRouter.html gzip | 577 B | 578 B | |
Overall change | 1.76 kB | 1.76 kB |
Diffs
Diff for _buildManifest.js
@@ -21,7 +21,7 @@ self.__BUILD_MANIFEST = {
"static\u002Fchunks\u002Fpages\u002FrouterDirect-50fd45536deb174654c1.js"
],
"/script": [
- "static\u002Fchunks\u002Fpages\u002Fscript-afc4b3ab6b4763aff619.js"
+ "static\u002Fchunks\u002Fpages\u002Fscript-6d080d3c0355db6a774e.js"
],
"/withRouter": [
"static\u002Fchunks\u002Fpages\u002FwithRouter-0fffa173b4934d0b86a2.js"
Diff for script-HASH.js
@@ -150,6 +150,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
dangerouslySetInnerHTML = props.dangerouslySetInnerHTML,
_props$children = props.children,
children = _props$children === void 0 ? "" : _props$children,
+ _props$strategy = props.strategy,
+ strategy =
+ _props$strategy === void 0 ? "afterInteractive" : _props$strategy,
onError = props.onError;
var cacheKey = id || src; // Script has already loaded
@@ -218,13 +221,14 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
el.setAttribute(attr, value);
}
+ el.setAttribute("data-nscript", strategy);
document.body.appendChild(el);
};
function handleClientScriptLoad(props) {
- var _props$strategy = props.strategy,
+ var _props$strategy2 = props.strategy,
strategy =
- _props$strategy === void 0 ? "afterInteractive" : _props$strategy;
+ _props$strategy2 === void 0 ? "afterInteractive" : _props$strategy2;
if (strategy === "afterInteractive") {
loadScript(props);
@@ -261,9 +265,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
_props$onLoad2 = props.onLoad,
onLoad = _props$onLoad2 === void 0 ? function() {} : _props$onLoad2,
dangerouslySetInnerHTML = props.dangerouslySetInnerHTML,
- _props$strategy2 = props.strategy,
+ _props$strategy3 = props.strategy,
strategy =
- _props$strategy2 === void 0 ? "afterInteractive" : _props$strategy2,
+ _props$strategy3 === void 0 ? "afterInteractive" : _props$strategy3,
onError = props.onError,
restProps = _objectWithoutProperties(props, [
"src",
Diff for main-HASH.js
@@ -732,6 +732,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
dangerouslySetInnerHTML = props.dangerouslySetInnerHTML,
_props$children = props.children,
children = _props$children === void 0 ? "" : _props$children,
+ _props$strategy = props.strategy,
+ strategy =
+ _props$strategy === void 0 ? "afterInteractive" : _props$strategy,
onError = props.onError;
var cacheKey = id || src; // Script has already loaded
@@ -800,13 +803,14 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
el.setAttribute(attr, value);
}
+ el.setAttribute("data-nscript", strategy);
document.body.appendChild(el);
};
function handleClientScriptLoad(props) {
- var _props$strategy = props.strategy,
+ var _props$strategy2 = props.strategy,
strategy =
- _props$strategy === void 0 ? "afterInteractive" : _props$strategy;
+ _props$strategy2 === void 0 ? "afterInteractive" : _props$strategy2;
if (strategy === "afterInteractive") {
loadScript(props);
@@ -843,9 +847,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
_props$onLoad2 = props.onLoad,
onLoad = _props$onLoad2 === void 0 ? function() {} : _props$onLoad2,
dangerouslySetInnerHTML = props.dangerouslySetInnerHTML,
- _props$strategy2 = props.strategy,
+ _props$strategy3 = props.strategy,
strategy =
- _props$strategy2 === void 0 ? "afterInteractive" : _props$strategy2,
+ _props$strategy3 === void 0 ? "afterInteractive" : _props$strategy3,
onError = props.onError,
restProps = _objectWithoutProperties(props, [
"src",
Diff for index.html
@@ -23,7 +23,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-b50bc000da2f86b7e127.js"
+ src="/_next/static/chunks/main-3f75f764e2ebb3fc8ab5.js"
defer=""
></script>
<script
Diff for link.html
@@ -23,7 +23,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-b50bc000da2f86b7e127.js"
+ src="/_next/static/chunks/main-3f75f764e2ebb3fc8ab5.js"
defer=""
></script>
<script
Diff for withRouter.html
@@ -23,7 +23,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-b50bc000da2f86b7e127.js"
+ src="/_next/static/chunks/main-3f75f764e2ebb3fc8ab5.js"
defer=""
></script>
<script
Add data attribute
data-nscript
to the script component