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

【问题标题】：react-pdf generation is very slow in combination with umijs与 umijs 结合使用 react-pdf 生成非常慢
【发布时间】：2020-12-30 11:13:15
【问题描述】：

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

PDF-Generation 150 Text-components 花了 arround 311.44 ms 没有 umi
使用 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的全新设置，只是修改了“startup”-page）
（确保您打开浏览器 (:8000) 选项卡，因为应用程序在此端口上提供服务，并直接检查 浏览器控制台，而不是代码和框之一）

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

我该如何解决这个问题？

【问题讨论】：

评论不用于扩展讨论；这个对话是moved to chat。

标签： javascript reactjs ant-design-pro react-pdf umijs

【解决方案1】：

我能够修复它：

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

【讨论】：

【解决方案2】：

其实这个问题是browserify进程的性能问题，CRA对于这个测试代码来说很快，因为CRA上配置了Webpack strong> 使用了新版本的 browserify 进程，它来自 /node_modules/process/browser.js，但 umijs 使用的是旧版本，node-libs-browser 已弃用 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。这不是一个好的解决方案，但我认为这是一个明智的决定

【讨论】：