perf(richtext-lexical): decrease size of field schema, minor perf optimizations #14248
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
AlessioGr
requested review from
JarrodMFlesch and
jacobsfletch
as code owners
AlessioGr
commented
Oct 17, 2025
| ...serverProps, | ||
| // Manually inject lexical-specific `sanitizedEditorConfig` server prop, in order to reduce the size of the field schema. | ||
| // Otherwise, the editorConfig would be included twice - once on the top-level, and once as part of the `FieldComponent` server props. | ||
| sanitizedEditorConfig: |
There was a problem hiding this comment.
See comment - the sanitizedEditorConfig is huge. It's worth extracting this lexical-specific prop injection out of the lexical package and do it here in the ui package, in order to avoid the duplication
AlessioGr
commented
Oct 17, 2025
| sanitizedEditorConfig: finalSanitizedEditorConfig, | ||
| }, | ||
| }, | ||
| CellComponent: '@payloadcms/richtext-lexical/rsc#RscEntryLexicalCell', |
There was a problem hiding this comment.
Removed passing severProps that were completely unused. They just unnecessarily blew up the size of this field config.
AlessioGr
commented
Oct 17, 2025
| } | ||
| // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve | ||
| featureI18n[lang].lexical.general = i18n[lang] | ||
| const featureI18n: Partial<GenericLanguages> = finalSanitizedEditorConfig.features.i18n |
There was a problem hiding this comment.
TypeScript fixes. This gets rid of the // @ts-expect-error
📦 esbuild Bundle Analysis for payloadThis analysis was generated by esbuild-bundle-analyzer. 🤖
Largest pathsThese visualization shows top 20 largest paths in the bundle.Meta file: packages/next/meta_index.json, Out file: esbuild/index.js
Meta file: packages/payload/meta_index.json, Out file: esbuild/index.js
Meta file: packages/payload/meta_shared.json, Out file: esbuild/exports/shared.js
Meta file: packages/richtext-lexical/meta_client.json, Out file: esbuild/exports/client_optimized/index.js
Meta file: packages/ui/meta_client.json, Out file: esbuild/exports/client_optimized/index.js
Meta file: packages/ui/meta_shared.json, Out file: esbuild/exports/shared_optimized/index.js
DetailsNext to the size is how much the size has increased or decreased compared with the base branch of this PR.
|
AlessioGr
commented
Oct 17, 2025
| if ( | ||
| resolvedFeature.componentImports && | ||
| typeof resolvedFeature.componentImports === 'object' && | ||
| !Array.isArray(resolvedFeature.componentImports) |
There was a problem hiding this comment.
Due to previous weak typing, we were incorrectly adding componentImports to the featureClientImportMap, even though the JSDocs said that only objects will be added
AlessioGr
commented
Oct 17, 2025
| 'lexical_internal_feature', | ||
| featureKey, | ||
| ].join('.') | ||
| const featureSchemaPath = `${args.schemaPath}.lexical_internal_feature.${featureKey}` |
There was a problem hiding this comment.
Perf improvement. Why .split and .join, if we can just manually append to the schemaPath string.
AlessioGr
commented
Oct 17, 2025
| const resolvedFeatureMapArray = Array.from( | ||
| args.sanitizedEditorConfig.resolvedFeatureMap.entries(), | ||
| ).sort((a, b) => a[1].order - b[1].order) | ||
| const resolvedFeatureMapArray = [...args.sanitizedEditorConfig.resolvedFeatureMap].sort( |
There was a problem hiding this comment.
Apparently a tiny bit faster than Array.from() + .entries(). Also easier to read
AlessioGr
commented
Oct 17, 2025
| if (ClientComponent) { | ||
| addToImportMap(ClientComponent) | ||
| } | ||
| addToImportMap(resolvedFeature.ClientFeature) |
There was a problem hiding this comment.
addToImportMap already skips null/undefined components => remove duplicative check
AlessioGr
commented
Oct 17, 2025
| for (const component of Object.values(resolvedFeature.componentImports)) { | ||
| addToImportMap(component as PayloadComponent) | ||
| } | ||
| addToImportMap(Object.values(resolvedFeature.componentImports)) |
There was a problem hiding this comment.
addToImportMap already checks and handles arrays
AlessioGr
commented
Oct 17, 2025
| 'A Feature you have installed does not return the client props as clientFeatureProps. Please make sure to always return those props, even if they are null, as other important props like order and featureKey are later on injected.', | ||
| ) | ||
| } | ||
| featureProviderMap.set(featureProvider.clientFeatureProps.featureKey, featureProvider) |
There was a problem hiding this comment.
One less for loop by using existing for loop here
AlessioGr
commented
Oct 17, 2025
| props.admin = admin | ||
| } | ||
| if (Object.keys(featureClientImportMap).length) { | ||
| props.featureClientImportMap = featureClientImportMap |
There was a problem hiding this comment.
Do not unnecessarily send featureClientImportMap to client if it's empty. We do the same for other props
AlessioGr
commented
Oct 17, 2025
| ) // Execute the clientFeatureProvider function here, as the server cannot execute functions imported from use client files | ||
| } | ||
|
|
||
| const finalLexicalEditorConfig = lexicalEditorConfig |
There was a problem hiding this comment.
We already fall back to defaultEditorLexicalConfig when destructuring the component props. => unnecessary to do that here
GermanJablo
approved these changes
Oct 22, 2025
|
🚀 This is included in version v3.61.0 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Following up on #14228, this PR further reduces the size of the lexical field schema. Reasoning can be found in that PR.
Additionally, this PR includes a bunch of random TypeScript/JSDocs/Performance improvements, extracted from #14244 to keep the PR diff small. Not worth making separate PRs for each individual change.