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

[Fizz] preload bootstrapScripts #26753

Merged
merged 1 commit into from
May 31, 2023
Merged

Conversation

gnoff
Copy link
Collaborator

@gnoff gnoff commented May 1, 2023

This PR adds a preload for bootstrapScripts. preloads are captured synchronously when you create a new Request and as such the normal logic to check if a preload already exists is skipped.

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels May 1, 2023
@gnoff gnoff changed the title bootstrap scripts now preload [Fizz] preload bootstrapScripts May 1, 2023
@gnoff gnoff requested a review from sebmarkbage May 1, 2023 20:48
@react-sizebot
Copy link

react-sizebot commented May 1, 2023

Comparing: e1e68b9...d7e653b

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js = 164.28 kB 164.28 kB = 51.79 kB 51.79 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 171.72 kB 171.72 kB = 54.03 kB 54.03 kB
facebook-www/ReactDOM-prod.classic.js = 570.52 kB 570.52 kB = 100.66 kB 100.66 kB
facebook-www/ReactDOM-prod.modern.js = 554.26 kB 554.26 kB = 97.84 kB 97.84 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.development.js +0.44% 362.03 kB 363.62 kB +0.53% 79.95 kB 80.38 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.development.js +0.44% 362.06 kB 363.64 kB +0.53% 79.98 kB 80.40 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.development.js +0.43% 371.81 kB 373.40 kB +0.50% 82.16 kB 82.58 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.development.js +0.42% 360.28 kB 361.80 kB +0.53% 79.49 kB 79.92 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.development.js +0.42% 360.30 kB 361.83 kB +0.53% 79.52 kB 79.94 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.development.js +0.42% 377.39 kB 378.98 kB +0.51% 80.42 kB 80.83 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.development.js +0.42% 377.41 kB 379.01 kB +0.51% 80.44 kB 80.85 kB
facebook-www/ReactDOMServer-dev.modern.js +0.42% 371.46 kB 373.03 kB +0.49% 80.62 kB 81.01 kB
oss-stable-semver/react-dom/cjs/react-dom-server.bun.development.js +0.42% 357.27 kB 358.78 kB +0.50% 78.93 kB 79.32 kB
oss-stable/react-dom/cjs/react-dom-server.bun.development.js +0.42% 357.30 kB 358.80 kB +0.50% 78.96 kB 79.35 kB
facebook-www/ReactDOMServerStreaming-dev.modern.js +0.42% 366.31 kB 367.86 kB +0.52% 79.33 kB 79.74 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.development.js +0.42% 360.03 kB 361.53 kB +0.49% 79.82 kB 80.21 kB
oss-stable/react-dom/cjs/react-dom-server.browser.development.js +0.42% 360.05 kB 361.56 kB +0.49% 79.85 kB 80.24 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.development.js +0.42% 377.12 kB 378.70 kB +0.49% 80.75 kB 81.14 kB
oss-stable/react-dom/umd/react-dom-server.browser.development.js +0.42% 377.15 kB 378.73 kB +0.49% 80.77 kB 81.17 kB
oss-stable-semver/react-dom/cjs/react-dom-server.edge.development.js +0.42% 360.44 kB 361.94 kB +0.50% 79.94 kB 80.33 kB
oss-stable/react-dom/cjs/react-dom-server.edge.development.js +0.42% 360.46 kB 361.97 kB +0.49% 79.96 kB 80.36 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.development.js +0.42% 361.53 kB 363.03 kB +0.50% 79.87 kB 80.26 kB
oss-stable/react-dom/cjs/react-dom-server.node.development.js +0.42% 361.55 kB 363.06 kB +0.50% 79.89 kB 80.29 kB
facebook-www/ReactDOMServer-dev.classic.js +0.41% 378.88 kB 380.45 kB +0.47% 82.27 kB 82.65 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.development.js +0.41% 370.06 kB 371.58 kB +0.50% 81.71 kB 82.12 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.development.js +0.41% 387.59 kB 389.18 kB +0.50% 82.58 kB 82.99 kB
oss-experimental/react-dom/cjs/react-dom-server.bun.development.js +0.41% 367.05 kB 368.56 kB +0.49% 81.12 kB 81.52 kB
oss-experimental/react-dom/cjs/react-dom-static.browser.development.js +0.41% 368.54 kB 370.04 kB +0.48% 81.62 kB 82.01 kB
oss-experimental/react-dom/cjs/react-dom-static.edge.development.js +0.41% 368.95 kB 370.45 kB +0.48% 81.74 kB 82.13 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.development.js +0.41% 369.23 kB 370.74 kB +0.48% 81.80 kB 82.19 kB
oss-experimental/react-dom/umd/react-dom-server.browser.development.js +0.41% 386.74 kB 388.32 kB +0.48% 82.69 kB 83.09 kB
oss-experimental/react-dom/cjs/react-dom-server.edge.development.js +0.41% 369.64 kB 371.15 kB +0.48% 81.92 kB 82.31 kB
oss-experimental/react-dom/cjs/react-dom-static.node.development.js +0.41% 370.69 kB 372.20 kB +0.49% 81.94 kB 82.34 kB
oss-experimental/react-dom/cjs/react-dom-server.node.development.js +0.41% 370.73 kB 372.24 kB +0.49% 81.85 kB 82.25 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.production.min.js +0.39% 60.34 kB 60.57 kB +0.51% 18.42 kB 18.51 kB
oss-stable/react-dom/cjs/react-dom-server.browser.production.min.js +0.39% 60.36 kB 60.60 kB +0.50% 18.44 kB 18.53 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.production.min.js +0.39% 60.50 kB 60.73 kB +0.48% 18.67 kB 18.76 kB
oss-stable/react-dom/umd/react-dom-server.browser.production.min.js +0.38% 60.52 kB 60.76 kB +0.45% 18.69 kB 18.78 kB
oss-experimental/react-dom/cjs/react-dom-static.browser.production.min.js +0.38% 62.22 kB 62.45 kB +0.42% 19.26 kB 19.35 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.production.min.js +0.38% 62.34 kB 62.58 kB +0.39% 19.32 kB 19.40 kB
oss-stable-semver/react-dom/cjs/react-dom-server.bun.production.min.js +0.37% 62.76 kB 62.99 kB +0.47% 18.85 kB 18.94 kB
oss-experimental/react-dom/umd/react-dom-server.browser.production.min.js +0.37% 62.50 kB 62.73 kB +0.39% 19.57 kB 19.65 kB
oss-stable/react-dom/cjs/react-dom-server.bun.production.min.js +0.37% 62.78 kB 63.02 kB +0.47% 18.87 kB 18.96 kB
oss-experimental/react-dom/cjs/react-dom-static.edge.production.min.js +0.37% 62.56 kB 62.79 kB +0.45% 19.39 kB 19.48 kB
oss-stable-semver/react-dom/cjs/react-dom-server.edge.production.min.js +0.36% 64.58 kB 64.81 kB +0.46% 19.84 kB 19.93 kB
oss-stable/react-dom/cjs/react-dom-server.edge.production.min.js +0.36% 64.61 kB 64.84 kB +0.44% 19.86 kB 19.95 kB
oss-experimental/react-dom/cjs/react-dom-server.bun.production.min.js +0.36% 65.41 kB 65.64 kB +0.45% 20.03 kB 20.12 kB
oss-experimental/react-dom/cjs/react-dom-server.edge.production.min.js +0.35% 66.69 kB 66.93 kB +0.42% 20.81 kB 20.89 kB
oss-experimental/react-dom/cjs/react-dom-static.node.production.min.js +0.35% 66.79 kB 67.03 kB +0.43% 20.86 kB 20.95 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.production.min.js +0.34% 64.72 kB 64.94 kB +0.35% 19.90 kB 19.97 kB
oss-stable/react-dom/cjs/react-dom-server.node.production.min.js +0.34% 64.75 kB 64.97 kB +0.35% 19.92 kB 19.99 kB
oss-experimental/react-dom/cjs/react-dom-server.node.production.min.js +0.33% 66.83 kB 67.05 kB +0.37% 20.88 kB 20.95 kB
facebook-www/ReactDOMServerStreaming-prod.modern.js +0.25% 141.46 kB 141.81 kB +0.46% 26.81 kB 26.93 kB

Generated by 🚫 dangerJS against d7e653b

@sebmarkbage
Copy link
Collaborator

This might not be universally beneficial if it ends up blocking other display blocking resources like CSS or images. This would put it at the absolute top priority by default by getting the implicit high fetch priority and being first before anything else can be added.

Maybe this should be left up to user space, or maybe it should at least go last in the shell and maybe with fetchpriority="low". Although an explicit preload should maybe able to increase the fetchpriority.

It is in general more important to have the bootstrap than it is to have other types of JS like preinits coming from Flight though. Since you can at least do something with just the bootstrap but without it you can't do anything.

@gnoff
Copy link
Collaborator Author

gnoff commented May 1, 2023

right now explicit script preloads go before arbitrary preloads. But we at one point wanted scripts to go fairly late, behind things like images and styles. With styles we preload earlier if you are actually using a style. Fonts also have their own queue. But if you render a preload link it's currently behind explicit script preloads.

So as it stands this could potentially delay preloading images and other media. But the way we were going to thread this needle I think was to emit preloads for things that were actually rendered above scripts. Would it make sense for a background image inside a css file to be able to flush with higher priority than a preloaded script? It would not trigger the "used" hueristic so it would look the same as a preload for an image we did not encounter during rendering

or maybe it should at least go last in the shell and maybe with fetchpriority="low". Although an explicit preload should maybe able to increase the fetchpriority.

This is interesting but it stresses the Resource model because it doesn't have a good way to encode provenance besides the queue and we currently usually pre-render to chunks before flushing so changing things like fetchpriority after creating the resource is hard. I could make the rendering to chunks happen in flush (we do that with preloads for stylesheets because there is a high chance we won't end up flushing them) but this feels unforunate to apply to all preload resources

@gnoff gnoff force-pushed the preload-bootstrap-scripts branch from 2899034 to d7e653b Compare May 31, 2023 22:51
@gnoff gnoff merged commit b864ad4 into facebook:main May 31, 2023
@gnoff gnoff deleted the preload-bootstrap-scripts branch May 31, 2023 23:25
github-actions bot pushed a commit that referenced this pull request May 31, 2023
This PR adds a preload for bootstrapScripts. preloads are captured
synchronously when you create a new Request and as such the normal logic
to check if a preload already exists is skipped.

DiffTrain build for [b864ad4](b864ad4)
gnoff added a commit that referenced this pull request May 31, 2023
stacked on #26753 

Adds support for preloading bootstrapModules. We don't yet support
modules in Float's public interface but this implementation should be
compatible with what we do when we add it.
github-actions bot pushed a commit that referenced this pull request May 31, 2023
stacked on #26753

Adds support for preloading bootstrapModules. We don't yet support
modules in Float's public interface but this implementation should be
compatible with what we do when we add it.

DiffTrain build for [ae31d2e](ae31d2e)
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
This PR adds a preload for bootstrapScripts. preloads are captured
synchronously when you create a new Request and as such the normal logic
to check if a preload already exists is skipped.
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
stacked on facebook#26753 

Adds support for preloading bootstrapModules. We don't yet support
modules in Float's public interface but this implementation should be
compatible with what we do when we add it.
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
This PR adds a preload for bootstrapScripts. preloads are captured
synchronously when you create a new Request and as such the normal logic
to check if a preload already exists is skipped.

DiffTrain build for commit b864ad4.
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
stacked on #26753

Adds support for preloading bootstrapModules. We don't yet support
modules in Float's public interface but this implementation should be
compatible with what we do when we add it.

DiffTrain build for commit ae31d2e.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants