Skip to content
New issue

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

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add data attribute to script component #28310

Merged
merged 7 commits into from Aug 20, 2021
Merged

Conversation

janicklas-ralph
Copy link
Collaborator

@janicklas-ralph janicklas-ralph commented Aug 19, 2021

Add data attribute data-nscript to the script component

@ijjk ijjk added created-by: Chrome Aurora PRs by the Google Chrome team: https://web.dev/aurora type: next labels Aug 19, 2021
@@ -84,6 +84,7 @@ function getPreNextScripts(context: HtmlProps, props: OriginProps) {
key={scriptProps.src || index}
defer={!disableOptimizedLoading}
nonce={props.nonce}
data-nscript="beforeInteractive"
Copy link
Member

@styfle styfle Aug 19, 2021

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}?

Copy link
Member

@styfle styfle Aug 19, 2021

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

Copy link
Collaborator Author

@janicklas-ralph janicklas-ralph Aug 19, 2021

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

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

styfle
styfle approved these changes Aug 20, 2021
ijjk
ijjk approved these changes Aug 20, 2021
@ijjk
Copy link
Member

ijjk commented Aug 20, 2021

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary janicklas-ralph/next.js script Change
buildDuration 15.4s 15.6s ⚠️ +188ms
buildDurationCached 4s 3.9s -66ms
nodeModulesSize 61.5 MB 61.5 MB ⚠️ +343 B
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 ⚠️ +0.02
/ avg req/sec 901.87 894.1 ⚠️ -7.77
/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 ⚠️ +30 B
webpack-HASH.js gzip 1.45 kB 1.45 kB
Overall change 67.1 kB 67.1 kB ⚠️ +30 B
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 ⚠️ +36ms
buildDurationCached 5.5s 5.4s -42ms
nodeModulesSize 61.5 MB 61.5 MB ⚠️ +343 B
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 ⚠️ +0.02
/error-in-render avg req/sec 1617.9 1601.19 ⚠️ -16.71
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 ⚠️ +31 B
webpack-HASH.js gzip 1.19 kB 1.19 kB
Overall change 68 kB 68 kB ⚠️ +31 B
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 ⚠️ +27 B
withRouter-HASH.js gzip 295 B 295 B
30809af5c834..565.css gzip 125 B 125 B
Overall change 18.1 kB 18.1 kB ⚠️ +27 B
Client Build Manifests Overall increase ⚠️
vercel/next.js canary janicklas-ralph/next.js script Change
_buildManifest.js gzip 500 B 501 B ⚠️ +1 B
Overall change 500 B 501 B ⚠️ +1 B
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary janicklas-ralph/next.js script Change
index.html gzip 585 B 586 B ⚠️ +1 B
link.html gzip 597 B 597 B
withRouter.html gzip 577 B 578 B ⚠️ +1 B
Overall change 1.76 kB 1.76 kB ⚠️ +2 B

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
Commit: 4e1f75e

@kodiakhq kodiakhq bot merged commit 26255a6 into vercel:canary Aug 20, 2021
30 of 32 checks passed
@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
created-by: Chrome Aurora PRs by the Google Chrome team: https://web.dev/aurora type: next
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants