We previously preloaded stylesheets that were rendered in Fizz. The i…

…dea was we'd get a headstart fetching these resources since we know they are going to be rendered. However to really be effective non-float stylesheets need to rendered in the head and the preload here is not helpful and potentially hurtful to perf in a minor way. This change removes this functionality to make the code smaller and simpler
facebook · May 30, 2023 · b68042f · b68042f
1 parent 1cea384
commit b68042f
Show file tree

Hide file tree

Showing 3 changed files with 1 addition and 121 deletions.
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -1960,21 +1960,6 @@ function pushLink(
             }
           }
         }
-        let resource = resources.preloadsMap.get(key);
-        if (!resource) {
-          resource = {
-            type: 'preload',
-            chunks: ([]: Array<Chunk | PrecomputedChunk>),
-            state: NoState,
-            props: preloadAsStylePropsFromProps(href, props),
-          };
-          resources.preloadsMap.set(key, resource);
-          if (__DEV__) {
-            markAsImplicitResourceDEV(resource, props, resource.props);
-          }
-        }
-        pushLinkImpl(resource.chunks, resource.props);
-        resources.usedStylesheets.add(resource);
         return pushLinkImpl(target, props);
       } else {
         // This stylesheet refers to a Resource and we create a new one if necessary
@@ -4246,22 +4231,6 @@ export function writePreamble(
   // Flush unblocked stylesheets by precedence
   resources.precedences.forEach(flushAllStylesInPreamble, destination);
 
-  resources.usedStylesheets.forEach(resource => {
-    const key = getResourceKey(resource.props.as, resource.props.href);
-    if (resources.stylesMap.has(key)) {
-      // The underlying stylesheet is represented both as a used stylesheet
-      // (a regular component we will attempt to preload) and as a StylesheetResource.
-      // We don't want to emit two preloads for the same href so we defer
-      // the preload rules of the StylesheetResource when there is a conflict
-    } else {
-      const chunks = resource.chunks;
-      for (i = 0; i < chunks.length; i++) {
-        writeChunk(destination, chunks[i]);
-      }
-    }
-  });
-  resources.usedStylesheets.clear();
-
   resources.scripts.forEach(flushResourceInPreamble, destination);
   resources.scripts.clear();
 
@@ -4342,22 +4311,6 @@ export function writeHoistables(
   // but we want to kick off preloading as soon as possible
   resources.precedences.forEach(preloadLateStyles, destination);
 
-  resources.usedStylesheets.forEach(resource => {
-    const key = getResourceKey(resource.props.as, resource.props.href);
-    if (resources.stylesMap.has(key)) {
-      // The underlying stylesheet is represented both as a used stylesheet
-      // (a regular component we will attempt to preload) and as a StylesheetResource.
-      // We don't want to emit two preloads for the same href so we defer
-      // the preload rules of the StylesheetResource when there is a conflict
-    } else {
-      const chunks = resource.chunks;
-      for (i = 0; i < chunks.length; i++) {
-        writeChunk(destination, chunks[i]);
-      }
-    }
-  });
-  resources.usedStylesheets.clear();
-
   resources.scripts.forEach(flushResourceLate, destination);
   resources.scripts.clear();
 
@@ -4908,7 +4861,6 @@ export type Resources = {
   // usedImagePreloads: Set<PreloadResource>,
   precedences: Map<string, Set<StyleResource>>,
   stylePrecedences: Map<string, StyleTagResource>,
-  usedStylesheets: Set<PreloadResource>,
   scripts: Set<ScriptResource>,
   usedScripts: Set<PreloadResource>,
   explicitStylesheetPreloads: Set<PreloadResource>,
@@ -4936,7 +4888,6 @@ export function createResources(): Resources {
     // usedImagePreloads: new Set(),
     precedences: new Map(),
     stylePrecedences: new Map(),
-    usedStylesheets: new Set(),
     scripts: new Set(),
     usedScripts: new Set(),
     explicitStylesheetPreloads: new Set(),

diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -4503,71 +4503,6 @@ body {
       );
     });
 
-    // @gate enableFloat
-    it('preloads stylesheets without a precedence prop when server rendering', async () => {
-      await act(() => {
-        const {pipe} = renderToPipeableStream(
-          <html>
-            <head />
-            <body>
-              <link rel="stylesheet" href="notaresource" />
-              <div>hello world</div>
-            </body>
-          </html>,
-        );
-        pipe(writable);
-      });
-
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="preload" as="style" href="notaresource" />
-          </head>
-          <body>
-            <link rel="stylesheet" href="notaresource" />
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-    });
-
-    // @gate enableFloat
-    it('respects attributes defined on the stylesheet element when preloading stylesheets during server rendering', async () => {
-      await act(() => {
-        const {pipe} = renderToPipeableStream(
-          <html>
-            <head>
-              <link rel="stylesheet" fetchPriority="high" href="foo" />
-            </head>
-            <body>
-              <link rel="stylesheet" fetchPriority="low" href="notaresource" />
-              <div>hello world</div>
-            </body>
-          </html>,
-        );
-        pipe(writable);
-      });
-
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="preload" as="style" fetchpriority="high" href="foo" />
-            <link
-              rel="preload"
-              as="style"
-              fetchpriority="low"
-              href="notaresource"
-            />
-            <link rel="stylesheet" fetchpriority="high" href="foo" />
-          </head>
-          <body>
-            <link rel="stylesheet" fetchpriority="low" href="notaresource" />
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-    });
-
     // @gate enableFloat
     it('hoists stylesheet resources to the correct precedence', async () => {
       await act(() => {

diff --git a/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js b/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
@@ -245,9 +245,6 @@ describe('ReactDOM HostSingleton', () => {
     expect(getVisibleChildren(document)).toEqual(
       <html data-foo="foo">
         <head data-bar="bar">
-          <link rel="preload" href="resource" as="style" />
-          <link rel="preload" href="3rdparty" as="style" />
-          <link rel="preload" href="3rdparty2" as="style" />
           <title>a server title</title>
           <link rel="stylesheet" href="resource" />
           <link rel="stylesheet" href="3rdparty" />
@@ -842,10 +839,7 @@ describe('ReactDOM HostSingleton', () => {
     await waitForAll([]);
     expect(getVisibleChildren(document)).toEqual(
       <html>
-        <head>
-          <link rel="preload" as="style" href="before" />
-          <link rel="preload" as="style" href="after" />
-        </head>
+        <head />
         <body>
           <link rel="stylesheet" href="before" />
           <link rel="stylesheet" href="after" />