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`.
172 lines
5.1 KiB
TypeScript
172 lines
5.1 KiB
TypeScript
import type { CollectionConfig, Config } from 'payload'
|
|
|
|
import { fileURLToPath } from 'node:url'
|
|
import path from 'path'
|
|
|
|
const filename = fileURLToPath(import.meta.url)
|
|
const dirname = path.dirname(filename)
|
|
|
|
import ArrayFields from './collections/Array/index.js'
|
|
import BlockFields from './collections/Blocks/index.js'
|
|
import CheckboxFields from './collections/Checkbox/index.js'
|
|
import CodeFields from './collections/Code/index.js'
|
|
import CollapsibleFields from './collections/Collapsible/index.js'
|
|
import ConditionalLogic from './collections/ConditionalLogic/index.js'
|
|
import { CustomRowID } from './collections/CustomID/CustomRowID.js'
|
|
import { CustomTabID } from './collections/CustomID/CustomTabID.js'
|
|
import { CustomID } from './collections/CustomID/index.js'
|
|
import DateFields from './collections/Date/index.js'
|
|
import EmailFields from './collections/Email/index.js'
|
|
import GroupFields from './collections/Group/index.js'
|
|
import IndexedFields from './collections/Indexed/index.js'
|
|
import JSONFields from './collections/JSON/index.js'
|
|
import {
|
|
getLexicalFieldsCollection,
|
|
lexicalBlocks,
|
|
lexicalInlineBlocks,
|
|
} from './collections/Lexical/index.js'
|
|
import { LexicalAccessControl } from './collections/LexicalAccessControl/index.js'
|
|
import { LexicalInBlock } from './collections/LexicalInBlock/index.js'
|
|
import { LexicalLocalizedFields } from './collections/LexicalLocalized/index.js'
|
|
import { LexicalMigrateFields } from './collections/LexicalMigrate/index.js'
|
|
import { LexicalObjectReferenceBugCollection } from './collections/LexicalObjectReferenceBug/index.js'
|
|
import { LexicalRelationshipsFields } from './collections/LexicalRelationships/index.js'
|
|
import NumberFields from './collections/Number/index.js'
|
|
import PointFields from './collections/Point/index.js'
|
|
import RadioFields from './collections/Radio/index.js'
|
|
import RelationshipFields from './collections/Relationship/index.js'
|
|
import RichTextFields from './collections/RichText/index.js'
|
|
import RowFields from './collections/Row/index.js'
|
|
import SelectFields from './collections/Select/index.js'
|
|
import SelectVersionsFields from './collections/SelectVersions/index.js'
|
|
import TabsFields from './collections/Tabs/index.js'
|
|
import { TabsFields2 } from './collections/Tabs2/index.js'
|
|
import TextFields from './collections/Text/index.js'
|
|
import UIFields from './collections/UI/index.js'
|
|
import Uploads from './collections/Upload/index.js'
|
|
import Uploads2 from './collections/Upload2/index.js'
|
|
import UploadsMulti from './collections/UploadMulti/index.js'
|
|
import UploadsMultiPoly from './collections/UploadMultiPoly/index.js'
|
|
import UploadsPoly from './collections/UploadPoly/index.js'
|
|
import UploadRestricted from './collections/UploadRestricted/index.js'
|
|
import Uploads3 from './collections/Uploads3/index.js'
|
|
import TabsWithRichText from './globals/TabsWithRichText.js'
|
|
import { clearAndSeedEverything } from './seed.js'
|
|
|
|
export const collectionSlugs: CollectionConfig[] = [
|
|
getLexicalFieldsCollection({
|
|
blocks: lexicalBlocks,
|
|
inlineBlocks: lexicalInlineBlocks,
|
|
}),
|
|
LexicalMigrateFields,
|
|
LexicalLocalizedFields,
|
|
LexicalObjectReferenceBugCollection,
|
|
{
|
|
slug: 'users',
|
|
admin: {
|
|
useAsTitle: 'email',
|
|
},
|
|
auth: true,
|
|
fields: [
|
|
{
|
|
name: 'canViewConditionalField',
|
|
type: 'checkbox',
|
|
defaultValue: true,
|
|
},
|
|
],
|
|
},
|
|
LexicalInBlock,
|
|
LexicalAccessControl,
|
|
SelectVersionsFields,
|
|
ArrayFields,
|
|
BlockFields,
|
|
CheckboxFields,
|
|
CodeFields,
|
|
CollapsibleFields,
|
|
ConditionalLogic,
|
|
CustomID,
|
|
CustomTabID,
|
|
CustomRowID,
|
|
DateFields,
|
|
EmailFields,
|
|
RadioFields,
|
|
GroupFields,
|
|
RowFields,
|
|
IndexedFields,
|
|
JSONFields,
|
|
NumberFields,
|
|
PointFields,
|
|
RelationshipFields,
|
|
LexicalRelationshipsFields,
|
|
RichTextFields,
|
|
SelectFields,
|
|
TabsFields2,
|
|
TabsFields,
|
|
TextFields,
|
|
Uploads,
|
|
Uploads2,
|
|
Uploads3,
|
|
UploadsMulti,
|
|
UploadsPoly,
|
|
UploadsMultiPoly,
|
|
UploadRestricted,
|
|
UIFields,
|
|
]
|
|
|
|
export const baseConfig: Partial<Config> = {
|
|
collections: collectionSlugs,
|
|
globals: [TabsWithRichText],
|
|
blocks: [
|
|
{
|
|
slug: 'ConfigBlockTest',
|
|
fields: [
|
|
{
|
|
name: 'deduplicatedText',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
custom: {
|
|
client: {
|
|
'new-value': 'client available',
|
|
},
|
|
server: {
|
|
'new-server-value': 'only available on server',
|
|
},
|
|
},
|
|
admin: {
|
|
importMap: {
|
|
baseDir: path.resolve(dirname),
|
|
},
|
|
components: {
|
|
afterNavLinks: ['/components/AfterNavLinks.js#AfterNavLinks'],
|
|
},
|
|
custom: {
|
|
client: {
|
|
'new-value': 'client available',
|
|
},
|
|
},
|
|
timezones: {
|
|
supportedTimezones: ({ defaultTimezones }) => [
|
|
...defaultTimezones,
|
|
{ label: '(GMT-6) Monterrey, Nuevo Leon', value: 'America/Monterrey' },
|
|
],
|
|
defaultTimezone: 'America/Monterrey',
|
|
},
|
|
},
|
|
localization: {
|
|
defaultLocale: 'en',
|
|
fallback: true,
|
|
locales: ['en', 'es'],
|
|
},
|
|
onInit: async (payload) => {
|
|
if (process.env.SEED_IN_CONFIG_ONINIT !== 'false') {
|
|
await clearAndSeedEverything(payload)
|
|
}
|
|
},
|
|
typescript: {
|
|
outputFile: path.resolve(dirname, 'payload-types.ts'),
|
|
},
|
|
}
|