From e6bc6ee70b8ac1e9f4f21a7c11c3f3627840c725 Mon Sep 17 00:00:00 2001 From: gnoff Date: Mon, 7 Aug 2023 22:56:14 +0000 Subject: [PATCH] [Fizz]: Unify preload queue (#27190) Currently React attempts to prioritize certain preloads over others based on their type. This is at odds with allowing the user to control priority by ordering which calls are made first. There are some asset types that generally should just be prioritized first such as fonts since we don't know when fonts will be used and they either block display or may lead to fallback fonts being used. But for scripts and stylesheets we can emit them in the order received with other arbitrary preload types. We will eventually add support for emitting suspensey image preloads before other resources because these also block display however that implementation will look at which images are actually rendered rather than simply preloaded. DiffTrain build for [cb3404a0ccd8b5edf5d2b90bd844742090e38f42](https://github.com/facebook/react/commit/cb3404a0ccd8b5edf5d2b90bd844742090e38f42) --- compiled/facebook-www/REVISION | 2 +- .../ReactDOMServer-dev.classic.js | 52 ++++-------------- .../facebook-www/ReactDOMServer-dev.modern.js | 52 ++++-------------- .../ReactDOMServer-prod.classic.js | 53 ++++--------------- .../ReactDOMServer-prod.modern.js | 53 ++++--------------- .../ReactDOMServerStreaming-dev.modern.js | 50 ++++------------- .../ReactDOMServerStreaming-prod.modern.js | 51 +++--------------- 7 files changed, 56 insertions(+), 257 deletions(-) diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index f3734da4e16ec..5ab6cf4ceecd1 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -9edf470d6ed1f3ac12c23a248e64293f367c1797 +cb3404a0ccd8b5edf5d2b90bd844742090e38f42 diff --git a/compiled/facebook-www/ReactDOMServer-dev.classic.js b/compiled/facebook-www/ReactDOMServer-dev.classic.js index 90d54313edbb8..fc34ac14d5ed0 100644 --- a/compiled/facebook-www/ReactDOMServer-dev.classic.js +++ b/compiled/facebook-www/ReactDOMServer-dev.classic.js @@ -19,7 +19,7 @@ if (__DEV__) { var React = require("react"); var ReactDOM = require("react-dom"); -var ReactVersion = "18.3.0-www-classic-728bbc0a"; +var ReactVersion = "18.3.0-www-classic-94960c5b"; // This refers to a WWW module. var warningWWW = require("warning"); @@ -6285,18 +6285,8 @@ function writePreamble( resources.bootstrapScripts.forEach(flushResourceInPreamble, destination); resources.scripts.forEach(flushResourceInPreamble, destination); resources.scripts.clear(); - resources.explicitStylesheetPreloads.forEach( - flushResourceInPreamble, - destination - ); - resources.explicitStylesheetPreloads.clear(); - resources.explicitScriptPreloads.forEach( - flushResourceInPreamble, - destination - ); - resources.explicitScriptPreloads.clear(); - resources.explicitOtherPreloads.forEach(flushResourceInPreamble, destination); - resources.explicitOtherPreloads.clear(); // Write embedding preloadChunks + resources.explicitPreloads.forEach(flushResourceInPreamble, destination); + resources.explicitPreloads.clear(); // Write embedding preloadChunks var preloadChunks = responseState.preloadChunks; @@ -6352,12 +6342,8 @@ function writeHoistables(destination, resources, responseState) { resources.scripts.forEach(flushResourceLate, destination); resources.scripts.clear(); - resources.explicitStylesheetPreloads.forEach(flushResourceLate, destination); - resources.explicitStylesheetPreloads.clear(); - resources.explicitScriptPreloads.forEach(flushResourceLate, destination); - resources.explicitScriptPreloads.clear(); - resources.explicitOtherPreloads.forEach(flushResourceLate, destination); - resources.explicitOtherPreloads.clear(); // Write embedding preloadChunks + resources.explicitPreloads.forEach(flushResourceLate, destination); + resources.explicitPreloads.clear(); // Write embedding preloadChunks var preloadChunks = responseState.preloadChunks; @@ -6841,10 +6827,7 @@ function createResources() { stylePrecedences: new Map(), bootstrapScripts: new Set(), scripts: new Set(), - explicitStylesheetPreloads: new Set(), - // explicitImagePreloads: new Set(), - explicitScriptPreloads: new Set(), - explicitOtherPreloads: new Set(), + explicitPreloads: new Set(), // like a module global for currently rendering boundary boundaryResources: null }; @@ -7154,25 +7137,10 @@ function preload(href, options) { pushLinkImpl(resource.chunks, resource.props); } - switch (as) { - case "font": { - resources.fontPreloads.add(resource); - break; - } - - case "style": { - resources.explicitStylesheetPreloads.add(resource); - break; - } - - case "script": { - resources.explicitScriptPreloads.add(resource); - break; - } - - default: { - resources.explicitOtherPreloads.add(resource); - } + if (as === "font") { + resources.fontPreloads.add(resource); + } else { + resources.explicitPreloads.add(resource); } flushResources(request); diff --git a/compiled/facebook-www/ReactDOMServer-dev.modern.js b/compiled/facebook-www/ReactDOMServer-dev.modern.js index b899d328b626d..84a9c0c1d91c6 100644 --- a/compiled/facebook-www/ReactDOMServer-dev.modern.js +++ b/compiled/facebook-www/ReactDOMServer-dev.modern.js @@ -19,7 +19,7 @@ if (__DEV__) { var React = require("react"); var ReactDOM = require("react-dom"); -var ReactVersion = "18.3.0-www-modern-9727d465"; +var ReactVersion = "18.3.0-www-modern-9d3aa62d"; // This refers to a WWW module. var warningWWW = require("warning"); @@ -6285,18 +6285,8 @@ function writePreamble( resources.bootstrapScripts.forEach(flushResourceInPreamble, destination); resources.scripts.forEach(flushResourceInPreamble, destination); resources.scripts.clear(); - resources.explicitStylesheetPreloads.forEach( - flushResourceInPreamble, - destination - ); - resources.explicitStylesheetPreloads.clear(); - resources.explicitScriptPreloads.forEach( - flushResourceInPreamble, - destination - ); - resources.explicitScriptPreloads.clear(); - resources.explicitOtherPreloads.forEach(flushResourceInPreamble, destination); - resources.explicitOtherPreloads.clear(); // Write embedding preloadChunks + resources.explicitPreloads.forEach(flushResourceInPreamble, destination); + resources.explicitPreloads.clear(); // Write embedding preloadChunks var preloadChunks = responseState.preloadChunks; @@ -6352,12 +6342,8 @@ function writeHoistables(destination, resources, responseState) { resources.scripts.forEach(flushResourceLate, destination); resources.scripts.clear(); - resources.explicitStylesheetPreloads.forEach(flushResourceLate, destination); - resources.explicitStylesheetPreloads.clear(); - resources.explicitScriptPreloads.forEach(flushResourceLate, destination); - resources.explicitScriptPreloads.clear(); - resources.explicitOtherPreloads.forEach(flushResourceLate, destination); - resources.explicitOtherPreloads.clear(); // Write embedding preloadChunks + resources.explicitPreloads.forEach(flushResourceLate, destination); + resources.explicitPreloads.clear(); // Write embedding preloadChunks var preloadChunks = responseState.preloadChunks; @@ -6841,10 +6827,7 @@ function createResources() { stylePrecedences: new Map(), bootstrapScripts: new Set(), scripts: new Set(), - explicitStylesheetPreloads: new Set(), - // explicitImagePreloads: new Set(), - explicitScriptPreloads: new Set(), - explicitOtherPreloads: new Set(), + explicitPreloads: new Set(), // like a module global for currently rendering boundary boundaryResources: null }; @@ -7154,25 +7137,10 @@ function preload(href, options) { pushLinkImpl(resource.chunks, resource.props); } - switch (as) { - case "font": { - resources.fontPreloads.add(resource); - break; - } - - case "style": { - resources.explicitStylesheetPreloads.add(resource); - break; - } - - case "script": { - resources.explicitScriptPreloads.add(resource); - break; - } - - default: { - resources.explicitOtherPreloads.add(resource); - } + if (as === "font") { + resources.fontPreloads.add(resource); + } else { + resources.explicitPreloads.add(resource); } flushResources(request); diff --git a/compiled/facebook-www/ReactDOMServer-prod.classic.js b/compiled/facebook-www/ReactDOMServer-prod.classic.js index ffca8df28dfc6..dac215263fe86 100644 --- a/compiled/facebook-www/ReactDOMServer-prod.classic.js +++ b/compiled/facebook-www/ReactDOMServer-prod.classic.js @@ -1877,19 +1877,9 @@ function preload(href, options) { }), resources.preloadsMap.set(key, imageSizes), pushLinkImpl(imageSizes.chunks, imageSizes.props)); - switch (as) { - case "font": - resources.fontPreloads.add(imageSizes); - break; - case "style": - resources.explicitStylesheetPreloads.add(imageSizes); - break; - case "script": - resources.explicitScriptPreloads.add(imageSizes); - break; - default: - resources.explicitOtherPreloads.add(imageSizes); - } + "font" === as + ? resources.fontPreloads.add(imageSizes) + : resources.explicitPreloads.add(imageSizes); enqueueFlush(request); } } @@ -3655,21 +3645,11 @@ function flushCompletedQueues(request, destination) { ); resources.scripts.forEach(flushResourceInPreamble, destination); resources.scripts.clear(); - resources.explicitStylesheetPreloads.forEach( + resources.explicitPreloads.forEach( flushResourceInPreamble, destination ); - resources.explicitStylesheetPreloads.clear(); - resources.explicitScriptPreloads.forEach( - flushResourceInPreamble, - destination - ); - resources.explicitScriptPreloads.clear(); - resources.explicitOtherPreloads.forEach( - flushResourceInPreamble, - destination - ); - resources.explicitOtherPreloads.clear(); + resources.explicitPreloads.clear(); var preloadChunks = responseState.preloadChunks; for ( _responseState$extern = 0; @@ -3714,21 +3694,8 @@ function flushCompletedQueues(request, destination) { resources$jscomp$0.precedences.forEach(preloadLateStyles, destination); resources$jscomp$0.scripts.forEach(flushResourceLate, destination); resources$jscomp$0.scripts.clear(); - resources$jscomp$0.explicitStylesheetPreloads.forEach( - flushResourceLate, - destination - ); - resources$jscomp$0.explicitStylesheetPreloads.clear(); - resources$jscomp$0.explicitScriptPreloads.forEach( - flushResourceLate, - destination - ); - resources$jscomp$0.explicitScriptPreloads.clear(); - resources$jscomp$0.explicitOtherPreloads.forEach( - flushResourceLate, - destination - ); - resources$jscomp$0.explicitOtherPreloads.clear(); + resources$jscomp$0.explicitPreloads.forEach(flushResourceLate, destination); + resources$jscomp$0.explicitPreloads.clear(); var preloadChunks$jscomp$0 = responseState$jscomp$0.preloadChunks; for ( completedRootSegment = 0; @@ -3955,9 +3922,7 @@ function renderToStringImpl( stylePrecedences: new Map(), bootstrapScripts: new Set(), scripts: new Set(), - explicitStylesheetPreloads: new Set(), - explicitScriptPreloads: new Set(), - explicitOtherPreloads: new Set(), + explicitPreloads: new Set(), boundaryResources: null }; children = createRequest( @@ -4019,4 +3984,4 @@ exports.renderToString = function (children, options) { 'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server' ); }; -exports.version = "18.3.0-www-classic-e05f0ecc"; +exports.version = "18.3.0-www-classic-540364ea"; diff --git a/compiled/facebook-www/ReactDOMServer-prod.modern.js b/compiled/facebook-www/ReactDOMServer-prod.modern.js index 8aab06f19349f..b68a83ad9cb0a 100644 --- a/compiled/facebook-www/ReactDOMServer-prod.modern.js +++ b/compiled/facebook-www/ReactDOMServer-prod.modern.js @@ -1876,19 +1876,9 @@ function preload(href, options) { }), resources.preloadsMap.set(key, imageSizes), pushLinkImpl(imageSizes.chunks, imageSizes.props)); - switch (as) { - case "font": - resources.fontPreloads.add(imageSizes); - break; - case "style": - resources.explicitStylesheetPreloads.add(imageSizes); - break; - case "script": - resources.explicitScriptPreloads.add(imageSizes); - break; - default: - resources.explicitOtherPreloads.add(imageSizes); - } + "font" === as + ? resources.fontPreloads.add(imageSizes) + : resources.explicitPreloads.add(imageSizes); enqueueFlush(request); } } @@ -3553,21 +3543,11 @@ function flushCompletedQueues(request, destination) { ); resources.scripts.forEach(flushResourceInPreamble, destination); resources.scripts.clear(); - resources.explicitStylesheetPreloads.forEach( + resources.explicitPreloads.forEach( flushResourceInPreamble, destination ); - resources.explicitStylesheetPreloads.clear(); - resources.explicitScriptPreloads.forEach( - flushResourceInPreamble, - destination - ); - resources.explicitScriptPreloads.clear(); - resources.explicitOtherPreloads.forEach( - flushResourceInPreamble, - destination - ); - resources.explicitOtherPreloads.clear(); + resources.explicitPreloads.clear(); var preloadChunks = responseState.preloadChunks; for ( _responseState$extern = 0; @@ -3612,21 +3592,8 @@ function flushCompletedQueues(request, destination) { resources$jscomp$0.precedences.forEach(preloadLateStyles, destination); resources$jscomp$0.scripts.forEach(flushResourceLate, destination); resources$jscomp$0.scripts.clear(); - resources$jscomp$0.explicitStylesheetPreloads.forEach( - flushResourceLate, - destination - ); - resources$jscomp$0.explicitStylesheetPreloads.clear(); - resources$jscomp$0.explicitScriptPreloads.forEach( - flushResourceLate, - destination - ); - resources$jscomp$0.explicitScriptPreloads.clear(); - resources$jscomp$0.explicitOtherPreloads.forEach( - flushResourceLate, - destination - ); - resources$jscomp$0.explicitOtherPreloads.clear(); + resources$jscomp$0.explicitPreloads.forEach(flushResourceLate, destination); + resources$jscomp$0.explicitPreloads.clear(); var preloadChunks$jscomp$0 = responseState$jscomp$0.preloadChunks; for ( completedRootSegment = 0; @@ -3853,9 +3820,7 @@ function renderToStringImpl( stylePrecedences: new Map(), bootstrapScripts: new Set(), scripts: new Set(), - explicitStylesheetPreloads: new Set(), - explicitScriptPreloads: new Set(), - explicitOtherPreloads: new Set(), + explicitPreloads: new Set(), boundaryResources: null }; children = createRequest( @@ -3917,4 +3882,4 @@ exports.renderToString = function (children, options) { 'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server' ); }; -exports.version = "18.3.0-www-modern-432efc32"; +exports.version = "18.3.0-www-modern-c79c104a"; diff --git a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js index 5fed639f6e6d5..e51bdc62a9de3 100644 --- a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js +++ b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js @@ -6292,18 +6292,8 @@ function writePreamble( resources.bootstrapScripts.forEach(flushResourceInPreamble, destination); resources.scripts.forEach(flushResourceInPreamble, destination); resources.scripts.clear(); - resources.explicitStylesheetPreloads.forEach( - flushResourceInPreamble, - destination - ); - resources.explicitStylesheetPreloads.clear(); - resources.explicitScriptPreloads.forEach( - flushResourceInPreamble, - destination - ); - resources.explicitScriptPreloads.clear(); - resources.explicitOtherPreloads.forEach(flushResourceInPreamble, destination); - resources.explicitOtherPreloads.clear(); // Write embedding preloadChunks + resources.explicitPreloads.forEach(flushResourceInPreamble, destination); + resources.explicitPreloads.clear(); // Write embedding preloadChunks var preloadChunks = responseState.preloadChunks; @@ -6359,12 +6349,8 @@ function writeHoistables(destination, resources, responseState) { resources.scripts.forEach(flushResourceLate, destination); resources.scripts.clear(); - resources.explicitStylesheetPreloads.forEach(flushResourceLate, destination); - resources.explicitStylesheetPreloads.clear(); - resources.explicitScriptPreloads.forEach(flushResourceLate, destination); - resources.explicitScriptPreloads.clear(); - resources.explicitOtherPreloads.forEach(flushResourceLate, destination); - resources.explicitOtherPreloads.clear(); // Write embedding preloadChunks + resources.explicitPreloads.forEach(flushResourceLate, destination); + resources.explicitPreloads.clear(); // Write embedding preloadChunks var preloadChunks = responseState.preloadChunks; @@ -6848,10 +6834,7 @@ function createResources() { stylePrecedences: new Map(), bootstrapScripts: new Set(), scripts: new Set(), - explicitStylesheetPreloads: new Set(), - // explicitImagePreloads: new Set(), - explicitScriptPreloads: new Set(), - explicitOtherPreloads: new Set(), + explicitPreloads: new Set(), // like a module global for currently rendering boundary boundaryResources: null }; @@ -7161,25 +7144,10 @@ function preload(href, options) { pushLinkImpl(resource.chunks, resource.props); } - switch (as) { - case "font": { - resources.fontPreloads.add(resource); - break; - } - - case "style": { - resources.explicitStylesheetPreloads.add(resource); - break; - } - - case "script": { - resources.explicitScriptPreloads.add(resource); - break; - } - - default: { - resources.explicitOtherPreloads.add(resource); - } + if (as === "font") { + resources.fontPreloads.add(resource); + } else { + resources.explicitPreloads.add(resource); } flushResources(request); diff --git a/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js index 132c997098bb6..2e22a967481ba 100644 --- a/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js +++ b/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js @@ -1926,19 +1926,9 @@ function preload(href, options) { }), resources.preloadsMap.set(key, imageSizes), pushLinkImpl(imageSizes.chunks, imageSizes.props)); - switch (as) { - case "font": - resources.fontPreloads.add(imageSizes); - break; - case "style": - resources.explicitStylesheetPreloads.add(imageSizes); - break; - case "script": - resources.explicitScriptPreloads.add(imageSizes); - break; - default: - resources.explicitOtherPreloads.add(imageSizes); - } + "font" === as + ? resources.fontPreloads.add(imageSizes) + : resources.explicitPreloads.add(imageSizes); enqueueFlush(request); } } @@ -3415,21 +3405,11 @@ function flushCompletedQueues(request, destination) { ); resources.scripts.forEach(flushResourceInPreamble, destination); resources.scripts.clear(); - resources.explicitStylesheetPreloads.forEach( + resources.explicitPreloads.forEach( flushResourceInPreamble, destination ); - resources.explicitStylesheetPreloads.clear(); - resources.explicitScriptPreloads.forEach( - flushResourceInPreamble, - destination - ); - resources.explicitScriptPreloads.clear(); - resources.explicitOtherPreloads.forEach( - flushResourceInPreamble, - destination - ); - resources.explicitOtherPreloads.clear(); + resources.explicitPreloads.clear(); var preloadChunks = responseState.preloadChunks; for ( _responseState$extern = 0; @@ -3474,21 +3454,8 @@ function flushCompletedQueues(request, destination) { resources$jscomp$0.precedences.forEach(preloadLateStyles, destination); resources$jscomp$0.scripts.forEach(flushResourceLate, destination); resources$jscomp$0.scripts.clear(); - resources$jscomp$0.explicitStylesheetPreloads.forEach( - flushResourceLate, - destination - ); - resources$jscomp$0.explicitStylesheetPreloads.clear(); - resources$jscomp$0.explicitScriptPreloads.forEach( - flushResourceLate, - destination - ); - resources$jscomp$0.explicitScriptPreloads.clear(); - resources$jscomp$0.explicitOtherPreloads.forEach( - flushResourceLate, - destination - ); - resources$jscomp$0.explicitOtherPreloads.clear(); + resources$jscomp$0.explicitPreloads.forEach(flushResourceLate, destination); + resources$jscomp$0.explicitPreloads.clear(); var preloadChunks$jscomp$0 = responseState$jscomp$0.preloadChunks; for ( completedRootSegment = 0; @@ -3825,9 +3792,7 @@ exports.renderToStream = function (children, options) { stylePrecedences: new Map(), bootstrapScripts: new Set(), scripts: new Set(), - explicitStylesheetPreloads: new Set(), - explicitScriptPreloads: new Set(), - explicitOtherPreloads: new Set(), + explicitPreloads: new Set(), boundaryResources: null }, identifierPrefix = options ? options.identifierPrefix : void 0,