[Fizz] Outline if a boundary would add too many bytes to the next completion (facebook#33029)

Follow up to facebook#33027.

This enhances the heuristic so that we accumulate the size of the
currently written boundaries. Starting from the size of the root (minus
preamble) for the shell.

This ensures that if you have many small boundaries they don't all
continue to get inlined. For example, you can wrap each paragraph in a
document in a Suspense boundary to regain document streaming
capabilities if that's what you want.

However, one consideration is if it's worth producing a fallback at all.
Maybe if it's like `null` it's free but if it's like a whole alternative
page, then it's not. It's possible to have completely useless Suspense
boundaries such as when you nest several directly inside each other. So
this uses a limit of at least 500 bytes of the content itself for it to
be worth outlining at all. It also can't be too small because then for
example a long list of paragraphs can never be outlined.

In the fixture I straddle this limit so some paragraphs are too small to
be considered. An unfortunate effect of that is that you can end up with
some of them not being outlined which means that they appear out of
order. SuspenseList is supposed to address that but it's unfortunate.

The limit is still fairly high though so it's unlikely that by default
you'd start outlining anything within the viewport at all. I had to
reduce the `progressiveChunkSize` by an order of magnitude in my fixture
to try it out properly.

Author: sebmarkbage

fixtures/ssr/server/render.js

@@ -19,7 +19,7 @@ class ThrottledWritable extends Writable {
   constructor(destination) {
     super();
     this.destination = destination;
-    this.delay = 150;
+    this.delay = 10;
   }
 
   _write(chunk, encoding, callback) {
@@ -49,10 +49,10 @@ export default function render(url, res) {
     // Log fatal errors
     console.error('Fatal', error);
   });
-  console.log('hello');
   let didError = false;
   const {pipe, abort} = renderToPipeableStream(<App assets={assets} />, {
     bootstrapScripts: [assets['main.js']],
+    progressiveChunkSize: 1024,
     onShellReady() {
       // If something errored before we started streaming, we set the error code appropriately.
       res.statusCode = didError ? 500 : 200;

fixtures/ssr/src/components/Chrome.js

@@ -39,11 +39,7 @@ export default class Chrome extends Component {
               {this.props.children}
             </Theme.Provider>
           </Suspense>
-          <p>This should appear in the first paint.</p>
-          <Suspense fallback="Loading...">
-            <p>This content should not block paint.</p>
-            <LargeContent />
-          </Suspense>
+          <LargeContent />
           <script
             dangerouslySetInnerHTML={{
               __html: `assetManifest = ${JSON.stringify(assets)};`,