Ant Design Pro 性能优化 ProTable 分页数据 100 条每页时点击查询出现卡顿

现象

ProTable在选择100每页时，点击查询按钮，或者分页页数时界面卡顿十分明显。

Debug

使用DevTools开发者工具中的Performance选项卡，只能看到查询按钮和分页页数按钮的INP很高。

使用React插件，选择Profiler，录制操作，在火焰图中可以看到很多Tooltip呈现黄色警告。

原因

在ProTable中的columns中，columns有很多个，最主要是设置了每个column都有ellipsis属性，当宽度不够时会显示Tooltip。

解决

去掉ellipsis属性，将宽度设置更大一些。

代码

const MyPage = () => {
  const columns: ProColumns<TableListItem>[] = [
    {
      title: "id",
      dataIndex: 'id',
      sorter: true,
      // ellipsis: true,
      // width: 180,
    },
    // ...
  ]
  return <PageContainer>
    <ProTable<TableListItem>
      columns={columns}
      rowKey="id"
      scroll={{ x: 5000, y: 600 }}
      pagination={{
        pageSizeOptions: [5, 10, 25, 50, 100, 200],
        defaultPageSize: 200,
        showSizeChanger: true,
      }}
    >
    </ProTable>
  </PageContainer>
}