From b751222b393b7fba56e74142da4d49a6d89cee45 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Wed, 3 Jan 2024 00:14:21 +0800 Subject: [PATCH] perf: improve lazy load in code editor with loadable --- package.json | 2 ++ pnpm-lock.yaml | 30 ++++++++++++++++++++++ src/client/App.tsx | 4 +-- src/client/components/CodeEditor/index.tsx | 4 +-- 4 files changed, 35 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 463ce17..4999a3e 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "dependencies": { "@ant-design/charts": "^1.4.2", "@ant-design/icons": "^5.2.5", + "@loadable/component": "^5.16.3", "@monaco-editor/react": "^4.6.0", "@paralleldrive/cuid2": "^2.2.2", "@prisma/client": "^5.4.2", @@ -98,6 +99,7 @@ "@types/express": "^4.17.17", "@types/fs-extra": "^11.0.3", "@types/jsonwebtoken": "^9.0.2", + "@types/loadable__component": "^5.13.8", "@types/lodash": "^4.14.198", "@types/lodash-es": "^4.17.9", "@types/morgan": "^1.9.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6035179..84e6def 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,6 +7,9 @@ dependencies: '@ant-design/icons': specifier: ^5.2.5 version: 5.2.5(react-dom@18.2.0)(react@18.2.0) + '@loadable/component': + specifier: ^5.16.3 + version: 5.16.3(react@18.2.0) '@monaco-editor/react': specifier: ^4.6.0 version: 4.6.0(monaco-editor@0.45.0)(react-dom@18.2.0)(react@18.2.0) @@ -225,6 +228,9 @@ devDependencies: '@types/jsonwebtoken': specifier: ^9.0.2 version: 9.0.2 + '@types/loadable__component': + specifier: ^5.13.8 + version: 5.13.8 '@types/lodash': specifier: ^4.14.198 version: 4.14.198 @@ -1711,6 +1717,18 @@ packages: call-bind: 1.0.2 dev: true + /@loadable/component@5.16.3(react@18.2.0): + resolution: {integrity: sha512-2mVvHs2988oVX2/zM0y6nYhJ4rTVHhkhRnpupBA0Rjl5tS8op9uSR4u5SLVfMLxzpspr2UiIBQD+wEuMsuq4Dg==} + engines: {node: '>=8'} + peerDependencies: + react: ^16.3.0 || ^17.0.0 || ^18.0.0 + dependencies: + '@babel/runtime': 7.22.11 + hoist-non-react-statics: 3.3.2 + react: 18.2.0 + react-is: 16.13.1 + dev: false + /@mapbox/geojson-rewind@0.5.2: resolution: {integrity: sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==} hasBin: true @@ -2573,6 +2591,12 @@ packages: '@types/node': 18.17.12 dev: true + /@types/loadable__component@5.13.8: + resolution: {integrity: sha512-0FF/WihuPkR5IFOHiBzC95bSACvgQNUQCuNy1WF8F/lCBBHgS2SxarIk4CTjWM10A72ovpmXZDRcuAXZNS+/kQ==} + dependencies: + '@types/react': 18.2.21 + dev: true + /@types/lodash-es@4.17.9: resolution: {integrity: sha512-ZTcmhiI3NNU7dEvWLZJkzG6ao49zOIjEgIE0RgV7wbPxU0f2xT3VSAHw2gmst8swH6V0YkLRGp4qPlX/6I90MQ==} dependencies: @@ -5410,6 +5434,12 @@ packages: type-fest: 0.8.1 dev: true + /hoist-non-react-statics@3.3.2: + resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} + dependencies: + react-is: 16.13.1 + dev: false + /hosted-git-info@2.8.9: resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==} dev: true diff --git a/src/client/App.tsx b/src/client/App.tsx index b5daa3f..bbf955d 100644 --- a/src/client/App.tsx +++ b/src/client/App.tsx @@ -73,9 +73,7 @@ export const App: React.FC = React.memo(() => { - }> - - + diff --git a/src/client/components/CodeEditor/index.tsx b/src/client/components/CodeEditor/index.tsx index b176af6..763db6d 100644 --- a/src/client/components/CodeEditor/index.tsx +++ b/src/client/components/CodeEditor/index.tsx @@ -1,5 +1,5 @@ -import { lazy } from 'react'; +import loadable from '@loadable/component'; -export const CodeEditor = lazy(() => +export const CodeEditor = loadable(() => import('./main').then((m) => ({ default: m.CodeEditor })) );