Improving script loading strategy by janicklas-ralph · Pull Request #24939 · vercel/next.js

janicklas-ralph · 2021-05-10T04:23:20Z

Feature

Follow up PR from the RFC #24938

PR changes default script loading strategy to used defer in <head> under an experimental flag: experimental.disableOptimizedLoading with the default set to true, use false to get the new behavior.

ijjk · 2021-05-12T08:58:15Z

Failing test suites

Commit: e70303c

test/integration/optimized-loading/test/index.test.js

Optimized loading > dev mode > should render the page
Optimized loading > dev mode > should not have JS preload links
Optimized loading > dev mode > should load scripts with defer in head
Optimized loading > dev mode > should render the page
Optimized loading > dev mode > should not have JS preload links
Optimized loading > dev mode > should load scripts with defer in head

Expand output

● Optimized loading › dev mode › should render the page

FetchError: request to http://localhost:38975/ failed, reason: connect ECONNREFUSED 127.0.0.1:38975

  at ClientRequest.<anonymous> (../node_modules/node-fetch/lib/index.js:1461:11)

● Optimized loading › dev mode › should not have JS preload links

FetchError: request to http://localhost:38975/ failed, reason: connect ECONNREFUSED 127.0.0.1:38975

  at ClientRequest.<anonymous> (../node_modules/node-fetch/lib/index.js:1461:11)

● Optimized loading › dev mode › should load scripts with defer in head

FetchError: request to http://localhost:38975/ failed, reason: connect ECONNREFUSED 127.0.0.1:38975

  at ClientRequest.<anonymous> (../node_modules/node-fetch/lib/index.js:1461:11)

● Optimized loading › dev mode › should render the page

FetchError: request to http://localhost:38975/page1 failed, reason: connect ECONNREFUSED 127.0.0.1:38975

  at ClientRequest.<anonymous> (../node_modules/node-fetch/lib/index.js:1461:11)

● Optimized loading › dev mode › should not have JS preload links

FetchError: request to http://localhost:38975/page1 failed, reason: connect ECONNREFUSED 127.0.0.1:38975

  at ClientRequest.<anonymous> (../node_modules/node-fetch/lib/index.js:1461:11)

● Optimized loading › dev mode › should load scripts with defer in head

FetchError: request to http://localhost:38975/page1 failed, reason: connect ECONNREFUSED 127.0.0.1:38975

  at ClientRequest.<anonymous> (../node_modules/node-fetch/lib/index.js:1461:11)

ijjk · 2021-05-12T18:52:22Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
buildDuration	16.8s	16.7s	-141ms
buildDurationCached	4.9s	5s	⚠️ +21ms
nodeModulesSize	46.6 MB	46.6 MB	⚠️ +6.65 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	janicklas-ralph/next.js script	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.884	2.81	-0.07
/ avg req/sec	866.7	889.68	+22.98
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.704	1.716	⚠️ +0.01
/error-in-render avg req/sec	1466.97	1456.85	⚠️ -10.12

Client Bundles (main, webpack, commons)

	vercel/next.js canary	janicklas-ralph/next.js script	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	19.4 kB	19.4 kB	✓
webpack-HASH.js gzip	994 B	994 B	✓
Overall change	59.7 kB	59.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	janicklas-ralph/next.js script	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_app-HASH.js gzip	1.02 kB	1.02 kB	✓
_error-HASH.js gzip	3.06 kB	3.06 kB	✓
amp-HASH.js gzip	526 B	526 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	262 B	262 B	✓
link-HASH.js gzip	1.65 kB	1.65 kB	✓
routerDirect..HASH.js gzip	331 B	331 B	✓
withRouter-HASH.js gzip	329 B	329 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.54 kB	8.54 kB	✓

Client Build Manifests

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_buildManifest.js gzip	390 B	390 B	✓
Overall change	390 B	390 B	✓

Rendered Page Sizes

	vercel/next.js canary	janicklas-ralph/next.js script	Change
index.html gzip	559 B	559 B	✓
link.html gzip	568 B	568 B	✓
withRouter.html gzip	556 B	556 B	✓
Overall change	1.68 kB	1.68 kB	✓

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
buildDuration	20.6s	20.6s	-36ms
buildDurationCached	7.3s	7.4s	⚠️ +97ms
nodeModulesSize	46.6 MB	46.6 MB	⚠️ +6.65 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	janicklas-ralph/next.js script	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	19.4 kB	19.4 kB	✓
webpack-HASH.js gzip	994 B	994 B	✓
Overall change	59.7 kB	59.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	janicklas-ralph/next.js script	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_app-HASH.js gzip	1.02 kB	1.02 kB	✓
_error-HASH.js gzip	3.06 kB	3.06 kB	✓
amp-HASH.js gzip	526 B	526 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	262 B	262 B	✓
link-HASH.js gzip	1.65 kB	1.65 kB	✓
routerDirect..HASH.js gzip	331 B	331 B	✓
withRouter-HASH.js gzip	329 B	329 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.54 kB	8.54 kB	✓

Client Build Manifests

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_buildManifest.js gzip	390 B	390 B	✓
Overall change	390 B	390 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_error.js	1.34 MB	1.34 MB	⚠️ +1.47 kB
404.html	2.42 kB	2.42 kB	✓
500.html	2.41 kB	2.41 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.61 kB	1.61 kB	✓
css.html	1.79 kB	1.79 kB	✓
hooks.html	1.67 kB	1.67 kB	✓
index.js	1.34 MB	1.34 MB	⚠️ +1.47 kB
link.js	1.4 MB	1.4 MB	⚠️ +1.47 kB
routerDirect.js	1.39 MB	1.4 MB	⚠️ +1.47 kB
withRouter.js	1.39 MB	1.4 MB	⚠️ +1.47 kB
Overall change	6.9 MB	6.9 MB	⚠️ +7.37 kB

Webpack 4 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
buildDuration	14.2s	14s	-214ms
buildDurationCached	6s	6s	-58ms
nodeModulesSize	46.6 MB	46.6 MB	⚠️ +6.65 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.817	2.894	⚠️ +0.08
/ avg req/sec	887.56	863.81	⚠️ -23.75
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.576	1.684	⚠️ +0.11
/error-in-render avg req/sec	1585.82	1484.88	⚠️ -100.94

Client Bundles (main, webpack, commons)

	vercel/next.js canary	janicklas-ralph/next.js script	Change
677f882d2ed8..HASH.js gzip	13.3 kB	13.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.26 kB	7.26 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	janicklas-ralph/next.js script	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_app-HASH.js gzip	1.28 kB	1.28 kB	✓
_error-HASH.js gzip	3.74 kB	3.74 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	339 B	339 B	✓
hooks-HASH.js gzip	887 B	887 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	9.38 kB	9.38 kB	✓

Client Build Manifests

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_buildManifest.js gzip	420 B	420 B	✓
Overall change	420 B	420 B	✓

Rendered Page Sizes

	vercel/next.js canary	janicklas-ralph/next.js script	Change
index.html gzip	614 B	614 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Commit: c8842e0

Improving script loading strategy

e81926e

janicklas-ralph requested review from divmain, ijjk, lfades, shuding and timneutkens as code owners May 10, 2021 04:23

ijjk added the type: next label May 10, 2021

Fix unwanted change

862d419

This comment has been minimized.

Sign in to view

janicklas-ralph mentioned this pull request May 10, 2021

Refactor experimental-script component #24940

Merged

janicklas-ralph added 2 commits May 11, 2021 12:16

Merge branch 'canary' of github.com:vercel/next.js into script

e657f7b

Flip flag for minor release

6523bc2

This comment has been minimized.

Sign in to view

Refactor test name

88cd89e

This comment has been minimized.

Sign in to view

Update flag on next-server and worker

e70303c

This comment has been minimized.

Sign in to view

janicklas-ralph added 2 commits May 12, 2021 11:30

Merge branch 'canary' of github.com:vercel/next.js into script

79c5f9a

Fix test

c8842e0

timneutkens merged commit eaf74c1 into vercel:canary May 13, 2021

janicklas-ralph deleted the script branch May 25, 2021 20:37

flybayer pushed a commit to blitz-js/next.js that referenced this pull request Jun 1, 2021

Improving script loading strategy (vercel#24939)

cfb05e6

shuding mentioned this pull request Nov 12, 2021

Improve script loading when streaming is enabled #31338

Closed

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improving script loading strategy#24939

Improving script loading strategy#24939
timneutkens merged 8 commits intovercel:canaryfrom
janicklas-ralph:script

janicklas-ralph commented May 10, 2021 •

edited by timneutkens

Loading

Uh oh!

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented May 12, 2021

Uh oh!

ijjk commented May 12, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

janicklas-ralph commented May 10, 2021 • edited by timneutkens Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Feature

Uh oh!

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented May 12, 2021

Failing test suites

Uh oh!

ijjk commented May 12, 2021

Stats from current PR

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

janicklas-ralph commented May 10, 2021 •

edited by timneutkens

Loading