mirror of
https://github.com/zebrajr/react.git
synced 2025-12-06 12:20:20 +01:00
[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:
parent
06e89951be
commit
643257ca52
|
|
@ -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);
|
||||
|
|
|
|||
21
packages/react-server/src/ReactFlightServer.js
vendored
21
packages/react-server/src/ReactFlightServer.js
vendored
|
|
@ -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') {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user