结合umijs 生成react-pdf 非常慢

Question

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

• PDF 生成 150 个文本组件在没有 umi 的情况下花费了大约 311.44 毫秒
• 使用 umi：7179.40 毫秒

在 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 被调用时，幕后发生了什么？

我该如何解决这个问题？

Answer 1

我能够修复它：

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