[Flight] Serialize functions by reference (#33539)

On pages that have a high number of server components (e.g. common when
doing syntax highlighting), the debug outlining can produce extremely
large RSC payloads. For example a documentation page I was working on
had a 13.8 MB payload. I noticed that a majority of this was the source
code for the same function components repeated over and over again (over
4000 times) within `$E()` eval commands.

This PR deduplicates the same functions by serializing by reference,
similar to what is already done for objects. Doing this reduced the
payload size of my page from 13.8 MB to 4.6 MB, and resulted in only 31
evals instead of over 4000. As a result it reduced development page load
and hydration time from 4 seconds to 1.5 seconds. It also means the
deserialized functions will have reference equality just as they did on
the server.
This commit is contained in:
Devon Govett 2025-06-20 10:36:07 -07:00 committed by GitHub
parent 06e89951be
commit 643257ca52
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 20 additions and 2 deletions

View File

@ -3276,6 +3276,7 @@ describe('ReactFlight', () => {
expect(typeof loggedFn2).toBe('function');
expect(loggedFn2).not.toBe(foo);
expect(loggedFn2.toString()).toBe(foo.toString());
expect(loggedFn2).toBe(loggedFn);
const promise = mockConsoleLog.mock.calls[0][1].promise;
expect(promise).toBeInstanceOf(Promise);

View File

@ -4105,8 +4105,25 @@ function renderConsoleValue(
}
// Serialize the body of the function as an eval so it can be printed.
// $FlowFixMe[method-unbinding]
return serializeEval('(' + Function.prototype.toString.call(value) + ')');
const writtenObjects = request.writtenObjects;
const existingReference = writtenObjects.get(value);
if (existingReference !== undefined) {
// We've already emitted this function, so we can
// just refer to that by its existing reference.
return existingReference;
}
const serializedValue = serializeEval(
// $FlowFixMe[method-unbinding]
'(' + Function.prototype.toString.call(value) + ')',
);
request.pendingChunks++;
const id = request.nextChunkId++;
const processedChunk = encodeReferenceChunk(request, id, serializedValue);
request.completedRegularChunks.push(processedChunk);
const reference = serializeByValueID(id);
writtenObjects.set(value, reference);
return reference;
}
if (typeof value === 'symbol') {