Files
payload/test/fields/collections/Text/index.ts
Alessio Gravili 4c8cafd6a6 perf: deduplicate blocks used in multiple places using new config.blocks property (#10905)
If you have multiple blocks that are used in multiple places, this can quickly blow up the size of your Payload Config. This will incur a performance hit, as more data is
1.  sent to the client (=> bloated `ClientConfig` and large initial html) and
2. processed on the server (permissions are calculated every single time you navigate to a page - this iterates through all blocks you have defined, even if they're duplicative)

This can be optimized by defining your block **once** in your Payload Config, and just referencing the block slug whenever it's used, instead of passing the entire block config. To do this, the block can be defined in the `blocks` array of the Payload Config. The slug can then be passed to the `blockReferences` array in the Blocks Field - the `blocks` array has to be empty for compatibility reasons.

```ts
import { buildConfig } from 'payload'
import { lexicalEditor, BlocksFeature } from '@payloadcms/richtext-lexical'

// Payload Config
const config = buildConfig({
  // Define the block once
  blocks: [
    {
      slug: 'TextBlock',
      fields: [
        {
          name: 'text',
          type: 'text',
        },
      ],
    },
  ],
  collections: [
    {
      slug: 'collection1',
      fields: [
        {
          name: 'content',
          type: 'blocks',
          // Reference the block by slug
          blockReferences: ['TextBlock'],
          blocks: [], // Required to be empty, for compatibility reasons
        },
      ],
    },
     {
      slug: 'collection2',
      fields: [
        {
          name: 'editor',
          type: 'richText',
          editor: lexicalEditor({
            BlocksFeature({
              // Same reference can be reused anywhere, even in the lexical editor, without incurred performance hit
              blocks: ['TextBlock'],
            })
          })
        },
      ],
    },
  ],
})
```

## v4.0 Plans

In 4.0, we will remove the `blockReferences` property, and allow string block references to be passed directly to the blocks `property`. Essentially, we'd remove the `blocks` property and rename `blockReferences` to `blocks`.

The reason we opted to a new property in this PR is to avoid breaking changes. Allowing strings to be passed to the `blocks` property will prevent plugins that iterate through fields / blocks from compiling.

## PR Changes

- Testing: This PR introduces a plugin that automatically converts blocks to block references. This is done in the fields__blocks test suite, to run our existing test suite using block references.

- Block References support: Most changes are similar. Everywhere we iterate through blocks, we have to now do the following:
1. Check if `field.blockReferences` is provided. If so, only iterate through that.
2. Check if the block is an object (= actual block), or string
3. If it's a string, pull the actual block from the Payload Config or from `payload.blocks`.

The exception is config sanitization and block type generations. This PR optimizes them so that each block is only handled once, instead of every time the block is referenced.

## Benchmarks

60 Block fields, each block field having the same 600 Blocks.

### Before:
**Initial HTML:** 195 kB
**Generated types:** takes 11 minutes, 461,209 lines

https://github.com/user-attachments/assets/11d49a4e-5414-4579-8050-e6346e552f56

### After:
**Initial HTML:** 73.6 kB
**Generated types:** takes 2 seconds, 35,810 lines

https://github.com/user-attachments/assets/3eab1a99-6c29-489d-add5-698df67780a3

### After Permissions Optimization (follow-up PR)
Initial HTML: 73.6 kB

https://github.com/user-attachments/assets/a909202e-45a8-4bf6-9a38-8c85813f1312


## Future Plans

1. This PR does not yet deduplicate block references during permissions calculation. We'll optimize that in a separate PR, as this one is already large enough
2. The same optimization can be done to deduplicate fields. One common use-case would be link field groups that may be referenced in multiple entities, outside of blocks. We might explore adding a new `fieldReferences` property, that allows you to reference those same `config.blocks`.
2025-02-14 00:08:20 +00:00

201 lines
3.8 KiB
TypeScript

import type { CollectionConfig } from 'payload'
import { defaultText, textFieldsSlug } from './shared.js'
const TextFields: CollectionConfig = {
slug: textFieldsSlug,
admin: {
useAsTitle: 'text',
},
defaultSort: 'id',
fields: [
{
name: 'text',
type: 'text',
required: true,
hooks: {
beforeDuplicate: [({ value }) => `${value} - duplicate`],
},
},
{
name: 'hiddenTextField',
type: 'text',
hidden: true,
},
{
name: 'adminHiddenTextField',
type: 'text',
admin: {
hidden: true,
description: 'This field should be hidden',
},
},
{
name: 'disabledTextField',
type: 'text',
admin: {
disabled: true,
description: 'This field should be disabled',
},
},
{
type: 'row',
admin: {
components: {
Field: './components/CustomField.tsx#CustomField',
},
},
fields: [],
},
{
name: 'localizedText',
type: 'text',
localized: true,
},
{
name: 'i18nText',
type: 'text',
admin: {
description: {
en: 'en description',
es: 'es description',
},
placeholder: {
en: 'en placeholder',
es: 'es placeholder',
},
},
label: {
en: 'Text en',
es: 'Text es',
},
},
{
name: 'defaultString',
type: 'text',
defaultValue: defaultText,
},
{
name: 'defaultEmptyString',
type: 'text',
defaultValue: '',
},
{
name: 'defaultFunction',
type: 'text',
defaultValue: () => defaultText,
},
{
name: 'defaultAsync',
type: 'text',
defaultValue: async (): Promise<string> => {
return new Promise((resolve) =>
setTimeout(() => {
resolve(defaultText)
}, 1),
)
},
},
{
name: 'overrideLength',
type: 'text',
label: 'Override the 40k text length default',
maxLength: 50000,
},
{
name: 'fieldWithDefaultValue',
type: 'text',
defaultValue: async () => {
const defaultValue = new Promise((resolve) => setTimeout(() => resolve('some-value'), 1000))
return defaultValue
},
},
{
name: 'dependentOnFieldWithDefaultValue',
type: 'text',
hooks: {
beforeChange: [
({ data }) => {
return data?.fieldWithDefaultValue || ''
},
],
},
},
{
name: 'hasMany',
type: 'text',
hasMany: true,
},
{
name: 'readOnlyHasMany',
type: 'text',
hasMany: true,
admin: {
readOnly: true,
},
defaultValue: ['default'],
},
{
name: 'validatesHasMany',
type: 'text',
hasMany: true,
minLength: 3,
},
{
name: 'localizedHasMany',
type: 'text',
hasMany: true,
localized: true,
},
{
name: 'withMinRows',
type: 'text',
hasMany: true,
minRows: 2,
},
{
name: 'withMaxRows',
type: 'text',
hasMany: true,
maxRows: 4,
},
{
name: 'defaultValueFromReq',
type: 'text',
defaultValue: async ({ req }) => {
return Promise.resolve(req.context.defaultValue)
},
},
{
name: 'array',
type: 'array',
fields: [
{
name: 'texts',
type: 'text',
hasMany: true,
},
],
},
{
name: 'blocks',
type: 'blocks',
blocks: [
{
slug: 'blockWithText',
fields: [
{
name: 'texts',
type: 'text',
hasMany: true,
},
],
},
],
},
],
}
export default TextFields