mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
8e9a5fc6c1
Since the very beginning we have had the `progressiveChunkSize` option but we never actually took advantage of it because we didn't count the bytes that we emitted. This starts counting the bytes by taking a pass over the added chunks each time a segment completes. That allows us to outline a Suspense boundary to stream in late even if it is already loaded by the time that back-pressure flow and in a `prerender`. Meaning it gets inserted with script. The effect can be seen in the fixture where if you have large HTML content that can block initial paint (thanks to [`rel="expect"`](https://github.com/facebook/react/pull/33016) but also nested Suspense boundaries). Before this fix, the paint would be blocked until the large content loaded. This lets us paint the fallback first in the case that the raw bytes of the content takes a while to download. You can set it to `Infinity` to opt-out. E.g. if you want to ensure there's never any scripts. It's always set to `Infinity` in `renderToHTML` and the legacy `renderToString`. One downside is that if we might choose to outline a boundary, we need to let its fallback complete. We don't currently discount the size of the fallback but really just consider them additive even though in theory the fallback itself could also add significant size or even more than the content. It should maybe really be considered the delta but that would require us to track the size of the fallback separately which is tricky. One problem with the current heuristic is that we just consider the size of the boundary content itself down to the next boundary. If you have a lot of small boundaries adding up, it'll never kick in. I intend to address that in a follow up.
82 lines
1.9 KiB
JavaScript
82 lines
1.9 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
*/
|
|
|
|
export type Destination = {
|
|
buffer: string,
|
|
done: boolean,
|
|
fatal: boolean,
|
|
error: mixed,
|
|
};
|
|
|
|
export opaque type PrecomputedChunk = string;
|
|
export opaque type Chunk = string;
|
|
export opaque type BinaryChunk = string;
|
|
|
|
export function flushBuffered(destination: Destination) {}
|
|
|
|
export const supportsRequestStorage = false;
|
|
export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);
|
|
|
|
export function beginWriting(destination: Destination) {}
|
|
|
|
export function writeChunk(
|
|
destination: Destination,
|
|
chunk: Chunk | PrecomputedChunk | BinaryChunk,
|
|
): void {
|
|
destination.buffer += chunk;
|
|
}
|
|
|
|
export function writeChunkAndReturn(
|
|
destination: Destination,
|
|
chunk: Chunk | PrecomputedChunk | BinaryChunk,
|
|
): boolean {
|
|
destination.buffer += chunk;
|
|
return true;
|
|
}
|
|
|
|
export function completeWriting(destination: Destination) {}
|
|
|
|
export function close(destination: Destination) {
|
|
destination.done = true;
|
|
}
|
|
|
|
export function stringToChunk(content: string): Chunk {
|
|
return content;
|
|
}
|
|
|
|
export function stringToPrecomputedChunk(content: string): PrecomputedChunk {
|
|
return content;
|
|
}
|
|
|
|
export function typedArrayToBinaryChunk(
|
|
content: $ArrayBufferView,
|
|
): BinaryChunk {
|
|
throw new Error('Not implemented.');
|
|
}
|
|
|
|
export const byteLengthOfChunk:
|
|
| null
|
|
| ((chunk: Chunk | PrecomputedChunk) => number) = null;
|
|
|
|
export function byteLengthOfBinaryChunk(chunk: BinaryChunk): number {
|
|
throw new Error('Not implemented.');
|
|
}
|
|
|
|
export function closeWithError(destination: Destination, error: mixed): void {
|
|
destination.done = true;
|
|
destination.fatal = true;
|
|
destination.error = error;
|
|
}
|
|
|
|
export {createFastHashJS as createFastHash} from './createFastHashJS';
|
|
|
|
export function readAsDataURL(blob: Blob): Promise<string> {
|
|
throw new Error('Not implemented.');
|
|
}
|