与umijs结合使用时，react-pdf生成非常慢

问题描述

我在一个新鲜的umi项目中加入了 react-pdf ：

• PDF生成150个文本组件花费了 311.44 ms，没有umi
• 使用umi：7179.40 ms

在umi项目中，每个元素要多花费大约10倍！

我尝试过的代码示例

import React from "react";
import "./styles.css";
import { Document,Page,pdf,Text,View } from "@react-pdf/renderer";

export default function App() {
  const pdfClickHandler = async () => {
    console.time("PDF generation took:");
    await pdf(
      <Document>
        <Page>
          <View>
            {Array.from(Array(150).keys()).map((key) => (
              <Text key={key}>text-element</Text>
            ))}
          </View>
        </Page>
      </Document>
    ).toBlob();
    console.timeEnd("PDF generation took:");
  };

  return (
    <div className="App">
      <button onClick={pdfClickHandler}>
        Generate fast PDF (without ant-design-pro)
      </button>
    </div>
  );
}

注意：以下示例是ant-design-pro项目。但是该错误会在所有umi-js项目中发生。

• 快速版本：https://codesandbox.io/s/damp-thunder-rybh7
• 慢速版本：https://codesandbox.io/s/confident-leaf-hgk7c?file=/src/pages/user/login/index.tsx

  

• 慢速版本（GitHub）：https://github.com/mleister97/ant-design-react-pdf-slow
• （慢速版本是ant-design-pro的全新设置，刚刚修改了“启动”页面）

  

• （确保在该端口上提供应用程序时，打开“浏览器（：8000）”选项卡，并直接检查浏览器的控制台，而不是代码和框之一）

调用toBlob时，幕后发生了什么？

如何解决此问题？

解决方法

我能够修复它：

1. npm install assert browserify-zlib buffer process stream-browserify util
2. 修改'plugin.config.ts'（umijs chainWebpack 配置）

export default (config: any,{ webpack }: { webpack: any }) => {

  // Set alias
  config.resolve.alias.set('process','process/browser');
  config.resolve.alias.set('stream','stream-browserify');
  config.resolve.alias.set('zlib','browserify-zlib');

  // Set plugin
  config.plugin('record').use(webpack.ProvidePlugin,[{
        process: 'process/browser',Buffer: ['buffer','Buffer'],}]);
};

,

实际上，此问题来自 browserify进程的性能，该测试代码的 CRA 快速，因为在 CRA上配置了Webpack 使用了新版本的
browserify进程，它来自/node_modules/process/browser.js，但 umijs 使用了较旧的版本，即{strong现在已弃用，它来自/node_modules/node-libs-browser/process.js。

我发现它正在逐行添加断点和跟踪线，看看解释器何时落入/node_modules/node-libs-browser/process.js时，它存储了很长时间，这与/node_modules/process/browser.js上的情况不一样，并以最快的速度传递可以。

node-libs-browser的性能不佳，umijs应该将其Webpack配置更新为最新版本。他们仍然使用webpack-dev-middleware版本 3.5.1 ，现在版本为 4.x.x 。

umijs具有通过修改/config/config.ts从开发人员那里获取新配置的强大能力，但是其配置文档是中文的，仍然没有翻译。

通过这些描述，我更喜欢从项目中删除umijs。那不是一个好的解决方案，但我认为这是一个明智的决定。