perf: faster page navigation by speeding up createClientConfig, speed up version fetching, speed up lexical init. Up to 100x faster #9457
Conversation
…emoving deep copying and building client config from the ground up instead
…ly runs once, and does not re-run when refreshing the page or navigating. HMR still works despite caching in dev
… comes back, we should run it in the background
…nd clientSchemaMap, introduce clientSchemaMap
…ayload and cache it. This now only happens once
…iting returned fields using select
…xists, if already-queried document is published
AlessioGr
changed the title
…t editor config is properly cached and only sanitized once for all lexical fields, instead of once per lexical field, as previously this was not cached until the sanitization function finished
AlessioGr
changed the title
|
|
||
| import { getClientConfig } from '@payloadcms/ui/utilities/getClientConfig' |
There was a problem hiding this comment.
This import is wrong. Was it exported from the top level properly from @payloadcms/ui?
There was a problem hiding this comment.
Nope, because getClientConfig can only run on the server, we can't export it from the top-level @payloadcms/ui. Thus, I have exported it directly
|
🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎ To accept the risk, merge this PR and you will not be notified again.
Next stepsWhat is a typosquat?Package name is similar to other popular packages and may not be the package you want. Use care when consuming similarly named packages and ensure that you did not intend to consume a different package. Malicious packages often publish using similar names as existing popular packages. Take a deeper look at the dependencyTake a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev. Remove the packageIf you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency. Mark a package as acceptable riskTo ignore an alert, reply with a comment starting with
|
|
🚀 This is included in version v3.2.0 |
If you had a lot of fields and collections, createClientConfig would be extremely slow, as it was copying a lot of memory. In my test config with a lot of fields and collections, it took 4 seconds(!!).
And not only that, it also ran between every single page navigation.
This PR significantly speeds up the createClientConfig function. In my test config, its execution speed went from 4 seconds to 50 ms.
Additionally, createClientConfig is now properly cached in both dev & prod. It no longer runs between every single page navigation. Even if you trigger a full page reload, createClientConfig will be cached and not run again. Despite that, HMR remains fully-functional.
This will make payload feel noticeably faster for large configs - especially if it contains a lot of richtext fields, as it was previously deep-copying the relatively large richText editor configs over and over again.
Before - 40 sec navigation speed
CleanShot.2024-11-22.at.15.35.52.mp4
After - 1 sec navigation speed
CleanShot.2024-11-22.at.15.31.47.mp4
Todo
Lexical changes
Red: old / removed
Green: new
Future plans for a different PR:
While the calculation of the richtext client config / map is now cached and only happens once, we still send the result of it to the client between every single navigation. I would like to only send it to the client once and keep it cached on the client:
Speed up version queries
This PR comes with performance optimizations for fetching versions before a document is loaded. Not only does it use the new select API to limit the fields it queries, it also completely skips a database query if the current document is published.
Speed up lexical init
Removes a bunch of unnecessary deep copying of lexical objects which caused higher memory usage and slower load times. Additionally, the lexical default config sanitization now happens less often.