Files
payloadcms/test/runE2E.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

158 lines
4.3 KiB
TypeScript

import { spawn } from 'child_process'
import globby from 'globby'
import minimist from 'minimist'
import path from 'path'
import shelljs from 'shelljs'
import slash from 'slash'
import { fileURLToPath } from 'url'
const __filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(__filename)
shelljs.env.DISABLE_LOGGING = 'true'
const prod = process.argv.includes('--prod')
process.argv = process.argv.filter((arg) => arg !== '--prod')
if (prod) {
process.env.PAYLOAD_TEST_PROD = 'true'
shelljs.env.PAYLOAD_TEST_PROD = 'true'
}
const playwrightBin = path.resolve(dirname, '../node_modules/.bin/playwright')
const testRunCodes: { code: number; suiteName: string }[] = []
const { _: args, bail, part } = minimist(process.argv.slice(2))
const suiteName = args[0]
// Run all
if (!suiteName) {
let files = await globby(`${path.resolve(dirname).replace(/\\/g, '/')}/**/*e2e.spec.ts`)
const totalFiles = files.length
if (part) {
if (!part.includes('/')) {
throw new Error('part must be in the format of "1/2"')
}
const [partToRun, totalParts] = part.split('/').map((n: string) => parseInt(n))
if (partToRun > totalParts) {
throw new Error('part cannot be greater than totalParts')
}
const partSize = Math.ceil(files.length / totalParts)
const start = (partToRun - 1) * partSize
const end = start + partSize
files = files.slice(start, end)
}
if (files.length !== totalFiles) {
console.log(`\n\nExecuting part ${part}: ${files.length} of ${totalFiles} E2E tests...\n\n`)
} else {
console.log(`\n\nExecuting all ${files.length} E2E tests...\n\n`)
}
console.log(`${files.join('\n')}\n`)
for (const file of files) {
clearWebpackCache()
const baseTestFolder = file?.split('/test/')?.[1]?.split('/')?.[0]
if (!baseTestFolder) {
throw new Error(`No base test folder found for ${file}`)
}
executePlaywright(file, baseTestFolder, bail)
}
} else {
let inputSuitePath: string | undefined = suiteName
let suiteConfigPath: string | undefined = 'config.ts'
if (suiteName.includes('#')) {
;[inputSuitePath, suiteConfigPath] = suiteName.split('#')
}
if (!inputSuitePath) {
throw new Error(`No test suite found for ${suiteName}`)
}
// Run specific suite
clearWebpackCache()
const suitePath: string | undefined = path
.resolve(dirname, inputSuitePath, 'e2e.spec.ts')
.replaceAll('__', '/')
const baseTestFolder = inputSuitePath.split('__')[0]
if (!suitePath || !baseTestFolder) {
throw new Error(`No test suite found for ${suiteName}`)
}
executePlaywright(suitePath, baseTestFolder, false, suiteConfigPath)
}
console.log('\nRESULTS:')
testRunCodes.forEach((tr) => {
console.log(`\tSuite: ${tr.suiteName}, Success: ${tr.code === 0}`)
})
console.log('\n')
// baseTestFolder is the most top level folder of the test suite, that contains the payload config.
// We need this because pnpm dev for a given test suite will always be run from the top level test folder,
// not from a nested suite folder.
function executePlaywright(
suitePath: string,
baseTestFolder: string,
bail = false,
suiteConfigPath?: string,
) {
console.log(`Executing ${suitePath}...`)
const playwrightCfg = path.resolve(
dirname,
`${bail ? 'playwright.bail.config.ts' : 'playwright.config.ts'}`,
)
const spawnDevArgs: string[] = [
'dev',
suiteConfigPath ? `${baseTestFolder}#${suiteConfigPath}` : baseTestFolder,
'--start-memory-db',
]
if (prod) {
spawnDevArgs.push('--prod')
}
process.env.START_MEMORY_DB = 'true'
const child = spawn('pnpm', spawnDevArgs, {
stdio: 'inherit',
cwd: path.resolve(dirname, '..'),
env: {
...process.env,
},
})
const cmd = slash(`${playwrightBin} test ${suitePath} -c ${playwrightCfg}`)
console.log('\n', cmd)
const { code, stdout } = shelljs.exec(cmd, {
cwd: path.resolve(dirname, '..'),
})
const suite = path.basename(path.dirname(suitePath))
const results = { code, suiteName: suite }
if (code) {
if (bail) {
console.error(`TEST FAILURE DURING ${suite} suite.`)
}
child.kill(1)
process.exit(1)
} else {
child.kill()
}
testRunCodes.push(results)
return stdout
}
function clearWebpackCache() {
const webpackCachePath = path.resolve(dirname, '../node_modules/.cache/webpack')
shelljs.rm('-rf', webpackCachePath)
}