Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.
This significantly optimizes the form-state response, reducing its size by up to more than 2x. This has rolling effects on initial page size as well, where the initial state for the entire form is sent through the request. To achieve this, we do the following:
Remove $undefined strings that are potentially attached to properties like value, initialValue, fieldSchema, etc.
Remove unnecessary properties like empty errorPaths arrays and empty customComponents objects, which only need to exist if used
Remove unnecessary properties like valid, passesCondition, etc. which only need to be returned if explicitly false
Remove unused properties like isSidebar, which simply don't need to exist at all, as they can be easily calculated during render
For backward compatibility, some of these changes are behind a temporary experimental.optimized flag.
Results
The following results were gathered by booting up each test suite listed below using the existing seed data, navigating to a document in the relevant collection, then typing a single letter into the noted field in order to invoke new form-state. The result is then saved to the file system for comparison.
This significantly optimizes the form-state response, reducing its size by up to more than 2x. This has rolling effects on initial page size as well, where the initial state for the entire form is sent through the request. To achieve this, we do the following:
$undefinedstrings that are potentially attached to properties likevalue,initialValue,fieldSchema, etc.errorPathsarrays and emptycustomComponentsobjects, which only need to exist if usedvalid,passesCondition, etc. which only need to be returned if explicitlyfalseisSidebar, which simply don't need to exist at all, as they can be easily calculated during renderFor backward compatibility, some of these changes are behind a temporary
experimental.optimizedflag.Results
The following results were gathered by booting up each test suite listed below using the existing seed data, navigating to a document in the relevant collection, then typing a single letter into the noted field in order to invoke new form-state. The result is then saved to the file system for comparison.
field-perfblocks-collectionlayout.0.field1fieldsarray-fieldsitems.0.textfieldsblock-fieldsblocks.0.richText