Adds web worker support to <Script /> using Partytown

[housseindjirdeh]

Summary

This PR adds a new worker strategy to the <Script /> component that automatically relocates and executes the script in a web worker.

<Script 
  strategy="worker"
  ...
/>

Partytown is used under the hood to provide this functionality.

Behavior

• This will land as an experimental feature and will only work behind an opt-in flag in next.config.js:

  experimental: {
    nextScriptWorkers: true
  }

• This setup use a similar approach to how ESLint and Typescript is used in Next.js by showing an error to the user to install the dependency locally themselves if they've enabled the experimental nextScriptWorkers flag.

  

• For Partytown to work, a number of static files must be served directly from the site (see docs). In this PR, these files are automatically copied to a ~partytown directory in .next/static during next build and next dev if the nextScriptWorkers flag is set to true.

Checklist

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

This PR fixes #31517.

[ijjk]

Do we want to call this something more specific to workers e.g. nextScriptWorkers?

[housseindjirdeh]

My initial plan was to have a single generic flag that would eventually control multiple experimental next/script features in the future, but maybe that just adds unnecessary confusion?

Also you're not the first person to suggest making it more specific; I just updated it to nextScriptWorkers :)

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	housseindjirdeh/next.js partytown	Change
buildDuration	15.2s	15.1s	-136ms
buildDurationCached	6s	6.1s	⚠️ +80ms
nodeModulesSize	378 MB	378 MB	⚠️ +13.9 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	housseindjirdeh/next.js partytown	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.916	2.939	⚠️ +0.02
/ avg req/sec	857.49	850.54	⚠️ -6.95
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.165	1.164	0
/error-in-render avg req/sec	2146.72	2147.86	+1.14

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	housseindjirdeh/next.js partytown	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	27.9 kB	27.9 kB	⚠️ +38 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.6 kB	71.6 kB	⚠️ +38 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	housseindjirdeh/next.js partytown	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	housseindjirdeh/next.js partytown	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	309 B	309 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.57 kB	2.57 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.09 kB	5.09 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.26 kB	2.26 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	319 B	319 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.8 kB	14.8 kB	✓

Client Build Manifests

	vercel/next.js canary	housseindjirdeh/next.js partytown	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	housseindjirdeh/next.js partytown	Change
index.html gzip	530 B	531 B	⚠️ +1 B
link.html gzip	544 B	545 B	⚠️ +1 B
withRouter.html gzip	524 B	526 B	⚠️ +2 B
Overall change	1.6 kB	1.6 kB	⚠️ +4 B

Diffs

Diff for main-HASH.js

@@ -3076,6 +3076,9 @@
             }
           }
         }
+        if (strategy === "worker") {
+          el.setAttribute("type", "text/partytown");
+        }
         el.setAttribute("data-nscript", strategy);
         document.body.appendChild(el);
       };
@@ -3141,11 +3144,9 @@
           },
           [props, strategy]
         );
-        if (strategy === "beforeInteractive") {
+        if (strategy === "beforeInteractive" || strategy === "worker") {
           if (updateScripts) {
-            scripts.beforeInteractive = (
-              scripts.beforeInteractive || []
-            ).concat([
+            scripts[strategy] = (scripts[strategy] || []).concat([
               _objectSpread(
                 {
                   src: src,

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-01320fb543a25c12.js"
+      src="/_next/static/chunks/main-ba59be0a2e2e35e6.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-01320fb543a25c12.js"
+      src="/_next/static/chunks/main-ba59be0a2e2e35e6.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-01320fb543a25c12.js"
+      src="/_next/static/chunks/main-ba59be0a2e2e35e6.js"
       defer=""
     ></script>
     <script

---

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	housseindjirdeh/next.js partytown	Change
buildDuration	18.7s	18.9s	⚠️ +196ms
buildDurationCached	6s	6.1s	⚠️ +62ms
nodeModulesSize	378 MB	378 MB	⚠️ +13.9 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	housseindjirdeh/next.js partytown	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.911	2.952	⚠️ +0.04
/ avg req/sec	858.92	846.86	⚠️ -12.06
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.199	1.159	-0.04
/error-in-render avg req/sec	2085.65	2157.75	+72.1

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	housseindjirdeh/next.js partytown	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.2 kB	28.3 kB	⚠️ +38 B
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	72.2 kB	72.2 kB	⚠️ +38 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	housseindjirdeh/next.js partytown	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	housseindjirdeh/next.js partytown	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	313 B	313 B	✓
css-HASH.js gzip	324 B	324 B	✓
dynamic-HASH.js gzip	2.56 kB	2.56 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	921 B	921 B	✓
image-HASH.js gzip	5.23 kB	5.23 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.33 kB	2.33 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	388 B	388 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	15 kB	15 kB	✓

Client Build Manifests

	vercel/next.js canary	housseindjirdeh/next.js partytown	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	housseindjirdeh/next.js partytown	Change
index.html gzip	531 B	531 B	✓
link.html gzip	546 B	545 B	-1 B
withRouter.html gzip	527 B	527 B	✓
Overall change	1.6 kB	1.6 kB	-1 B

Diffs

Diff for main-HASH.js

@@ -3076,6 +3076,9 @@
             }
           }
         }
+        if (strategy === "worker") {
+          el.setAttribute("type", "text/partytown");
+        }
         el.setAttribute("data-nscript", strategy);
         document.body.appendChild(el);
       };
@@ -3141,11 +3144,9 @@
           },
           [props, strategy]
         );
-        if (strategy === "beforeInteractive") {
+        if (strategy === "beforeInteractive" || strategy === "worker") {
           if (updateScripts) {
-            scripts.beforeInteractive = (
-              scripts.beforeInteractive || []
-            ).concat([
+            scripts[strategy] = (scripts[strategy] || []).concat([
               _objectSpread(
                 {
                   src: src,

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-01320fb543a25c12.js"
+      src="/_next/static/chunks/main-ba59be0a2e2e35e6.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-01320fb543a25c12.js"
+      src="/_next/static/chunks/main-ba59be0a2e2e35e6.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-01320fb543a25c12.js"
+      src="/_next/static/chunks/main-ba59be0a2e2e35e6.js"
       defer=""
     ></script>
     <script

Commit: efa6939