From 6bb7e40f7a760b03943f0e81f01b50b9f3a9eff4 Mon Sep 17 00:00:00 2001 From: sealday Date: Wed, 24 Apr 2024 03:29:59 +0800 Subject: [PATCH] perf: optimize pdf load (#827) Co-authored-by: sealday Reviewed-on: https://git.daoyoucloud.com/daoyoucloud/tachybase/pulls/827 --- .changeset/real-rocks-shout.md | 6 +++++ .../src/client/components/PDFViewer.tsx | 21 ++++++++-------- .../src/client/hooks/usePdfPath.tsx | 8 +++++-- .../server/actions/settlement-controller.ts | 24 +++++++++++++++++-- 4 files changed, 45 insertions(+), 14 deletions(-) create mode 100644 .changeset/real-rocks-shout.md diff --git a/.changeset/real-rocks-shout.md b/.changeset/real-rocks-shout.md new file mode 100644 index 000000000..7f9933429 --- /dev/null +++ b/.changeset/real-rocks-shout.md @@ -0,0 +1,6 @@ +--- +"@hera/plugin-rental": patch +"@hera/plugin-core": patch +--- + +perf diff --git a/packages/plugins/@hera/plugin-core/src/client/components/PDFViewer.tsx b/packages/plugins/@hera/plugin-core/src/client/components/PDFViewer.tsx index 4db890d9a..799742079 100644 --- a/packages/plugins/@hera/plugin-core/src/client/components/PDFViewer.tsx +++ b/packages/plugins/@hera/plugin-core/src/client/components/PDFViewer.tsx @@ -39,10 +39,15 @@ export const PDFViewer = forwardRef((props, ref) = const [numPages, setNumPages] = useState(0); const [contentWindow, setContentWindow] = useState(null); const { file, width = 960 } = props; - const { loading, data, run } = useRequest({ - url: file, - responseType: 'arraybuffer', - }); + const { loading, data } = useRequest( + { + url: file, + responseType: 'arraybuffer', + }, + { + refreshDeps: [file], + }, + ); useImperativeHandle(ref, () => ({ download() { const blob = new Blob([data as ArrayBuffer], { type: 'application/pdf' }); @@ -52,9 +57,6 @@ export const PDFViewer = forwardRef((props, ref) = contentWindow.print(); }, })); - useEffect(() => { - run(); - }, [file]); useEffect(() => { if (loading || !data) { return; @@ -74,15 +76,14 @@ export const PDFViewer = forwardRef((props, ref) = document.body.removeChild(iframe); }; }, [data, loading]); - console.log('width', width); return ( ( - + loading={() => ( +
)} diff --git a/packages/plugins/@hera/plugin-rental/src/client/hooks/usePdfPath.tsx b/packages/plugins/@hera/plugin-rental/src/client/hooks/usePdfPath.tsx index 65ddc05c9..be422b083 100644 --- a/packages/plugins/@hera/plugin-rental/src/client/hooks/usePdfPath.tsx +++ b/packages/plugins/@hera/plugin-rental/src/client/hooks/usePdfPath.tsx @@ -1,5 +1,5 @@ import { useRecord } from '@nocobase/client'; -import React, { createContext, useContext, useState } from 'react'; +import React, { createContext, useContext, useMemo, useState } from 'react'; import { SettlementStyleContext } from '../schema-initializer/actions/SettlementStyleSwitchActionInitializer'; export const PdfIsDoubleContext = createContext({ @@ -35,7 +35,11 @@ export const useRecordPdfPath = () => { const { isDouble } = useContext(PdfIsDoubleContext); const { settingType } = useContext(PdfIsLoadContext); const { margingTop } = useContext(PdfMargingTopContext); - return `/records:pdf?recordId=${record.id}&isDouble=${isDouble}&settingType=${settingType}&margingTop=${margingTop}`; + const path = useMemo( + () => `/records:pdf?recordId=${record.id}&isDouble=${isDouble}&settingType=${settingType}&margingTop=${margingTop}`, + [record.id, isDouble, settingType, margingTop], + ); + return path; }; export const WaybillsProvider = (props) => { diff --git a/packages/plugins/@hera/plugin-rental/src/server/actions/settlement-controller.ts b/packages/plugins/@hera/plugin-rental/src/server/actions/settlement-controller.ts index ab6a71e43..6a0bfeb18 100644 --- a/packages/plugins/@hera/plugin-rental/src/server/actions/settlement-controller.ts +++ b/packages/plugins/@hera/plugin-rental/src/server/actions/settlement-controller.ts @@ -4,6 +4,9 @@ import { Inject, Action, Controller, Db } from '@nocobase/utils'; import { renderIt } from '../pdf-documents/settlements-document'; import { SettlementService } from '../services/settlement-service'; import { QueryTypes } from 'sequelize'; +import { Cache } from '@nocobase/cache'; +import getStream from 'get-stream'; +import { stringify } from 'flatted'; @Controller('settlements') export class SettlementController { @@ -54,8 +57,25 @@ export class SettlementController { }); const utcOffset = ctx.get('X-Timezone'); const { calc, contracts } = await this.settlmentService.settlement(settlement as any, utcOffset); - const pdf = await renderIt({ calc, contracts, result: systemSetting }); - ctx.body = pdf; + + const cache = ctx.app.cacheManager.getCache('@hera/plugin-rental') as Cache; + const key = stringify({ calc, contracts, result: systemSetting }); + + const result = await cache.get(key); + if (result) { + if (Buffer.isBuffer(result)) { + ctx.body = result; + } else { + ctx.body = Buffer.from(result.data); + } + } else { + const buf = await getStream.buffer( + // @ts-ignore + await renderIt({ calc, contracts, result: systemSetting }), + ); + ctx.body = buf; + await cache.set(key, buf); + } } @Action('excel')