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

Question

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

PDF-Generation 150 Text-components 在没有 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 被调用时，幕后发生了什么？

我该如何解决这个问题？

score 1 · Accepted Answer

我能够修复它：

npm install assert browserify-zlib buffer process stream-browserify util
修改 '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'],
  }]);
};

score 1 · Accepted Answer

实际上，这个问题来自于browserify进程的性能，CRA对于这个测试代码来说很快，因为CRA上的Webpack配置使用了新版本的browserify进程，它来自/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性能很差，应该将其umijsWebpack 配置更新到最新版本。他们仍然使用3.5.1webpack-dev-middleware版本，现在在 vesion 4.xx上。

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

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

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

2 回答 2

Related

Reference