title: react-pdf generation is very slow in combination with umijs
body: <p>I included <strong>react-pdf</strong> in a fresh umi project:</p>
  <ul>
  <li>PDF-Generation 150 Text-components took arround <strong>311.44 ms without umi</strong></li>
  <li>Using umi: 7179.40 ms</li>
  </ul>
  <p><strong>Every single element takes about 10X more in umi projects!</strong></p>
  <p><strong>Code example I tried</strong></p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  import { Document, Page, pdf, Text, View } from &quot;@react-pdf/renderer&quot;;
  
  export default function App() {
    const pdfClickHandler = async () =&gt; {
      console.time(&quot;PDF generation took:&quot;);
      await pdf(
        &lt;Document&gt;
          &lt;Page&gt;
            &lt;View&gt;
              {Array.from(Array(150).keys()).map((key) =&gt; (
                &lt;Text key={key}&gt;text-element&lt;/Text&gt;
              ))}
            &lt;/View&gt;
          &lt;/Page&gt;
        &lt;/Document&gt;
      ).toBlob();
      console.timeEnd(&quot;PDF generation took:&quot;);
    };
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;button onClick={pdfClickHandler}&gt;
          Generate fast PDF (without ant-design-pro)
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><strong>NOTE</strong>: The following examples are <code>ant-design-pro</code> projects. BUT the error occurs in all <code>umi-js</code> projects.</p>
  <ul>
  <li>Fast version: <a href="https://codesandbox.io/s/damp-thunder-rybh7" rel="nofollow noreferrer">https://codesandbox.io/s/damp-thunder-rybh7</a></li>
  <li>Slow version: <a href="https://codesandbox.io/s/confident-leaf-hgk7c?file=/src/pages/user/login/index.tsx" rel="nofollow noreferrer">https://codesandbox.io/s/confident-leaf-hgk7c?file=/src/pages/user/login/index.tsx</a>
  <a href="https://i.stack.imgur.com/QWi30.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QWi30.png" alt="Instructions slow version codesandbox" /></a></li>
  <li>Slow version (GitHub): <a href="https://github.com/mleister97/ant-design-react-pdf-slow" rel="nofollow noreferrer">https://github.com/mleister97/ant-design-react-pdf-slow</a></li>
  <li>(Slow version is a fresh setup of ant-design-pro, just modified the &quot;startup&quot;-page)
  <a href="https://i.stack.imgur.com/3xat4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3xat4.png" alt="fast version" /></a></li>
  <li>(Make sure you open the Browser (:8000) Tab as the application is served on this port AND check directly the <strong>browser's console</strong>, not the codesandbox one)</li>
  </ul>
  <p><strong>What is going on behind the scenes when the toBlob is beeing called?</strong></p>
  <p>How can I fix this issue?</p>