与umijs相结合，生成pdf的速度非常慢。

Question

我在一个新的umi项目中包括了react pdf：

• PDF-Generation 150个文本组件绕311.44 ms而没有umi
• Using 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

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

​

https://github.com/mleister97/ant-design-react-pdf-slow

• (Slow版本是ant-

• -pro的一个新设置，刚刚修改了“启动”(-page)

。

​

• (确保在此端口上服务应用程序时打开浏览器(:8000)选项卡，并直接检查浏览器的控制台，而不是代码框)

，当toBlob被呼叫时，在幕后发生了什么？

我怎样才能解决这个问题？

Answer 1

我能修好它：

1. npm install assert browserify-zlib buffer process stream-browserify util
2. modify 'plugin.config.ts‘(umijs chainWebpack config)

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'],
  }]);
};

Answer 2

实际上，这个问题来自于浏览器化过程的性能，CRA对于这个测试代码来说是快速的，因为Webpack在CRA上的配置使用了新版本的浏览器化进程，它来自于/node_modules/process/browser.js，但是umijs使用的是旧版本，node-libs-browser是所反对的，它来自/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，现在是vesion 4.x.x。

umijs很有能力通过修改/config/config.ts从开发人员那里获得新的配置，但是它的配置文档是中文的，还没有翻译。

通过这些描述，我更倾向于从项目中删除umijs。这不是一个好办法，但我认为这是一个明智的决定。