ci: analyze bundle size #13071

AlessioGr · 2025-07-07T15:50:34Z

This adds a new analyze step to our CI that analyzes the bundle size for our payload, @payloadcms/ui, @payloadcms/next and @payloadcms/richtext-lexical packages.

It does so using a new build:bundle-for-analysis script that packages can add if the normal build step does not output an esbuild-bundled version suitable for analyzing. For example, ui already runs esbuild, but we run it again using build:bundle-for-analysis because we do not want to split the bundle.

To see the specific tasks where the Asana app for GitHub is being used, see below:
- https://app.asana.com/0/0/1210692087147570

github-actions · 2025-07-07T15:55:45Z

📦 esbuild Bundle Analysis for payload

This analysis was generated by esbuild-bundle-analyzer. 🤖

Meta File	Out File	Size (raw)	Note
packages/next/meta_index.json	esbuild/index.js	746.76 KB	🆕 Added
packages/payload/meta_index.json	esbuild/index.js	1.19 MB	🆕 Added
packages/payload/meta_shared.json	esbuild/exports/shared.js	159.67 KB	🆕 Added
packages/richtext-lexical/meta_client.json	esbuild/exports/client_optimized/index.js	259.22 KB	🆕 Added
packages/ui/meta_client.json	esbuild/exports/client_optimized/index.js	1.11 MB	🆕 Added
packages/ui/meta_shared.json	esbuild/exports/shared_optimized/index.js	13.90 KB	🆕 Added

Largest paths

These visualization shows top 20 largest paths in the bundle.

Meta file: packages/next/meta_index.json, Out file: esbuild/index.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ ████████████████████▎ }}}$ 81.1%, 601.90 KB
dist/views/Version	${{\color{Goldenrod}{ █▋ }}}$ 6.6%, 49.35 KB
dist/views/Document	${{\color{Goldenrod}{ ▍ }}}$ 1.9%, 13.87 KB
dist/views/Root	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 6.44 KB
dist/views/Versions	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 6.17 KB
dist/views/API	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 5.90 KB
dist/views/List	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 5.61 KB
dist/views/Account	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 5.34 KB
dist/elements/Nav	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 4.84 KB
dist/elements/DocumentHeader	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 4.63 KB
dist/views/Login	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 4.39 KB
dist/views/Dashboard	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 3.68 KB
dist/views/ForgotPassword	${{\color{Goldenrod}{ }}}$ 0.4%, 3.09 KB
dist/layouts/Root	${{\color{Goldenrod}{ }}}$ 0.4%, 3.09 KB
dist/utilities/initPage	${{\color{Goldenrod}{ }}}$ 0.4%, 3.01 KB
dist/templates/Default	${{\color{Goldenrod}{ }}}$ 0.4%, 2.83 KB
dist/views/CreateFirstUser	${{\color{Goldenrod}{ }}}$ 0.3%, 2.48 KB
dist/views/ResetPassword	${{\color{Goldenrod}{ }}}$ 0.3%, 2.41 KB
dist/views/CollectionFolders	${{\color{Goldenrod}{ }}}$ 0.3%, 2.38 KB
dist/views/BrowseByFolder	${{\color{Goldenrod}{ }}}$ 0.3%, 2.22 KB
(other)	${{\color{Goldenrod}{ ████▋ }}}$ 18.9%, 140.18 KB

Meta file: packages/payload/meta_index.json, Out file: esbuild/index.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ █████████████████▊ }}}$ 71.1%, 841.00 KB
dist/fields/hooks	${{\color{Goldenrod}{ ▊ }}}$ 3.4%, 40.00 KB
dist/collections/operations	${{\color{Goldenrod}{ ▋ }}}$ 2.6%, 31.32 KB
dist/auth/operations	${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 14.45 KB
dist/utilities/configToJSONSchema.js	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 11.54 KB
dist/globals/operations	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 11.03 KB
dist/fields/config	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 10.78 KB
dist/fields/validations.js	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 9.35 KB
dist/queues/operations	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.35 KB
dist/bin/generateImportMap	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.27 KB
dist/database/migrations	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.79 KB
dist/uploads/fetchAPI-multipart	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.74 KB
dist/collections/config	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.58 KB
dist/collections/endpoints	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.87 KB
dist/index.js	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.83 KB
dist/config/orderable	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 6.25 KB
dist/utilities/telemetry	${{\color{Goldenrod}{ }}}$ 0.4%, 5.31 KB
dist/auth/endpoints	${{\color{Goldenrod}{ }}}$ 0.4%, 5.21 KB
dist/config/sanitize.js	${{\color{Goldenrod}{ }}}$ 0.4%, 4.76 KB
dist/auth/strategies	${{\color{Goldenrod}{ }}}$ 0.4%, 4.58 KB
(other)	${{\color{Goldenrod}{ ███████▏ }}}$ 28.9%, 341.74 KB

Meta file: packages/payload/meta_shared.json, Out file: esbuild/exports/shared.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ ████████████████████▏ }}}$ 80.6%, 126.19 KB
dist/fields/validations.js	${{\color{Goldenrod}{ █▌ }}}$ 6.0%, 9.35 KB
dist/fields/baseFields	${{\color{Goldenrod}{ ▍ }}}$ 1.8%, 2.79 KB
dist/utilities/deepCopyObject.js	${{\color{Goldenrod}{ ▍ }}}$ 1.6%, 2.48 KB
dist/auth/cookies.js	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 1.55 KB
dist/utilities/flattenTopLevelFields.js	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 1.41 KB
dist/fields/config	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 1.28 KB
dist/utilities/flattenAllFields.js	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 943 B
dist/utilities/fieldSchemaToJSON.js	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 917 B
dist/folders/utils	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 852 B
dist/utilities/unflatten.js	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 779 B
dist/collections/config	${{\color{Goldenrod}{ }}}$ 0.4%, 570 B
dist/bin/generateImportMap	${{\color{Goldenrod}{ }}}$ 0.4%, 559 B
dist/utilities/getSafeRedirect.js	${{\color{Goldenrod}{ }}}$ 0.3%, 423 B
dist/utilities/deepMerge.js	${{\color{Goldenrod}{ }}}$ 0.3%, 413 B
dist/utilities/getFieldPermissions.js	${{\color{Goldenrod}{ }}}$ 0.2%, 391 B
dist/utilities/formatLabels.js	${{\color{Goldenrod}{ }}}$ 0.2%, 380 B
dist/utilities/mergeListSearchAndWhere.js	${{\color{Goldenrod}{ }}}$ 0.2%, 344 B
dist/utilities/getBestFitFromSizes.js	${{\color{Goldenrod}{ }}}$ 0.2%, 340 B
dist/utilities/transformColumnPreferences.js	${{\color{Goldenrod}{ }}}$ 0.2%, 334 B
(other)	${{\color{Goldenrod}{ ████▊ }}}$ 19.4%, 30.32 KB

Meta file: packages/richtext-lexical/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Path	Size
dist/lexical/plugins	${{\color{Goldenrod}{ ███ }}}$ 12.1%, 30.91 KB
dist/features/experimental_table	${{\color{Goldenrod}{ ██▍ }}}$ 9.6%, 24.60 KB
dist/lexical/ui	${{\color{Goldenrod}{ ██▎ }}}$ 9.2%, 23.47 KB
dist/features/blocks	${{\color{Goldenrod}{ ██▏ }}}$ 8.8%, 22.43 KB
dist/packages/@lexical	${{\color{Goldenrod}{ █▊ }}}$ 7.4%, 18.99 KB
dist/features/link	${{\color{Goldenrod}{ █▊ }}}$ 7.0%, 17.96 KB
dist/features/toolbars	${{\color{Goldenrod}{ █▋ }}}$ 6.8%, 17.44 KB
dist/features/textState	${{\color{Goldenrod}{ █ }}}$ 4.3%, 10.98 KB
dist/features/upload	${{\color{Goldenrod}{ ▉ }}}$ 3.7%, 9.60 KB
dist/features/relationship	${{\color{Goldenrod}{ ▉ }}}$ 3.7%, 9.41 KB
dist/lexical/utils	${{\color{Goldenrod}{ ▊ }}}$ 3.2%, 8.08 KB
dist/features/debug	${{\color{Goldenrod}{ ▋ }}}$ 2.9%, 7.34 KB
dist/features/converters	${{\color{Goldenrod}{ ▋ }}}$ 2.7%, 7.04 KB
dist/utilities/fieldsDrawer	${{\color{Goldenrod}{ ▋ }}}$ 2.7%, 7.01 KB
dist/lexical/config	${{\color{Goldenrod}{ ▌ }}}$ 2.0%, 5.10 KB
dist/features/lists	${{\color{Goldenrod}{ ▍ }}}$ 1.9%, 4.95 KB
dist/lexical/theme	${{\color{Goldenrod}{ ▍ }}}$ 1.6%, 4.01 KB
dist/features/format	${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 3.46 KB
dist/lexical/LexicalEditor.js	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 3.23 KB
dist/features/indent	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 2.50 KB
(other)	${{\color{Goldenrod}{ █████████████████████▉ }}}$ 87.9%, 225.29 KB

Meta file: packages/ui/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ ████████████▉ }}}$ 51.8%, 572.70 KB
dist/elements/FolderView	${{\color{Goldenrod}{ ▋ }}}$ 2.5%, 27.72 KB
dist/elements/BulkUpload	${{\color{Goldenrod}{ ▌ }}}$ 2.2%, 24.51 KB
dist/elements/WhereBuilder	${{\color{Goldenrod}{ ▍ }}}$ 1.6%, 17.94 KB
dist/fields/Relationship	${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 15.94 KB
dist/elements/Table	${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 15.16 KB
dist/views/Edit	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 14.50 KB
dist/forms/Form	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 14.21 KB
dist/fields/Blocks	${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 12.43 KB
dist/fields/Upload	${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 11.94 KB
dist/elements/ListControls	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 9.04 KB
dist/elements/PublishButton	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 8.50 KB
dist/elements/LivePreview	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.18 KB
dist/fields/Array	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.92 KB
dist/elements/HTMLDiff	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.81 KB
dist/views/CollectionFolder	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.30 KB
dist/fields/Tabs	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.91 KB
dist/elements/ReactSelect	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.91 KB
dist/views/List	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.69 KB
dist/elements/Upload	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.62 KB
(other)	${{\color{Goldenrod}{ ████████████ }}}$ 48.2%, 532.19 KB

Meta file: packages/ui/meta_shared.json, Out file: esbuild/exports/shared_optimized/index.js

Path	Size
dist/graphics/Logo	${{\color{Goldenrod}{ █████▉ }}}$ 23.5%, 3.12 KB
../../node_modules	${{\color{Goldenrod}{ ████▉ }}}$ 19.9%, 2.65 KB
dist/graphics/Icon	${{\color{Goldenrod}{ ██▊ }}}$ 11.4%, 1.52 KB
dist/utilities/formatDocTitle	${{\color{Goldenrod}{ ██▏ }}}$ 8.5%, 1.13 KB
dist/utilities/groupNavItems.js	${{\color{Goldenrod}{ █▌ }}}$ 6.1%, 814 B
dist/utilities/api.js	${{\color{Goldenrod}{ █▍ }}}$ 5.7%, 756 B
dist/providers/TableColumns	${{\color{Goldenrod}{ █▍ }}}$ 5.7%, 755 B
dist/elements/Translation	${{\color{Goldenrod}{ ▉ }}}$ 3.7%, 493 B
dist/elements/withMergedProps	${{\color{Goldenrod}{ ▋ }}}$ 2.5%, 339 B
dist/utilities/handleTakeOver.js	${{\color{Goldenrod}{ ▍ }}}$ 1.9%, 251 B
dist/elements/WithServerSideProps	${{\color{Goldenrod}{ ▍ }}}$ 1.7%, 232 B
dist/utilities/handleGoBack.js	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 168 B
dist/fields/mergeFieldStyles.js	${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 159 B
dist/forms/Form	${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 147 B
dist/utilities/abortAndIgnore.js	${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 146 B
dist/utilities/hasSavePermission.js	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 136 B
dist/utilities/handleBackToDashboard.js	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 129 B
dist/utilities/findLocaleFromCode.js	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 84 B
dist/utilities/sanitizeID.js	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 77 B
dist/utilities/isEditing.js	${{\color{Goldenrod}{ }}}$ 0.4%, 59 B
(other)	${{\color{Goldenrod}{ ███████████████████▏ }}}$ 76.5%, 10.18 KB

Details

Next to the size is how much the size has increased or decreased compared with the base branch of this PR.

‼️: Size increased by 20% or more. Special attention should be given to this.
⚠️: Size increased in acceptable range (lower than 20%).
✅: No change or even downsized.
🗑️: The out file is deleted: not found in base branch.
🆕: The out file is newly found: will be added to base branch.

denolfe

Looks awesome! Thanks for rolling up the sleeves and doing this.

Just some small naming things to tweak.

packages/payload/package.json

package.json

packages/next/package.json

github-actions · 2025-07-07T20:19:51Z

🚀 This is included in version v3.46.0

AlessioGr added 5 commits July 6, 2025 18:19

scripts

230ade3

ci

bc32900

delete

8844de1

update gitignore

763a1a6

add ui

3823c20

AlessioGr requested a review from denolfe as a code owner July 7, 2025 15:50

github-actions bot added the created-by: Payload team label Jul 7, 2025

AlessioGr added 11 commits July 7, 2025 08:59

fix paths

329b186

Merge remote-tracking branch 'origin/main' into ci/esbuild

2aeb48b

name it bundleforanalyze to simplify ui esbuild

db7e84d

always bundle from dist

887f933

bundle next

22eb7e3

bundle lexical

28237ef

fix build

96e2110

Merge remote-tracking branch 'origin/main' into ci/esbuild

5e08635

fix lint

8a66875

fix lint

f54766b

fix ci

8dcb713

denolfe reviewed Jul 7, 2025

View reviewed changes

packages/payload/package.json Outdated Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

packages/next/package.json Outdated Show resolved Hide resolved

AlessioGr added 2 commits July 7, 2025 12:24

fix typo

6b017d6

adjust script name

c839773

AlessioGr requested a review from denolfe July 7, 2025 19:25

denolfe approved these changes Jul 7, 2025

View reviewed changes

AlessioGr enabled auto-merge (squash) July 7, 2025 19:28

AlessioGr disabled auto-merge July 7, 2025 19:29

AlessioGr enabled auto-merge (squash) July 7, 2025 19:29

AlessioGr merged commit af9837d into main Jul 7, 2025
80 checks passed

AlessioGr deleted the ci/esbuild branch July 7, 2025 20:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

ci: analyze bundle size #13071

ci: analyze bundle size #13071

Uh oh!

AlessioGr commented Jul 7, 2025 •

edited

Loading

github-actions bot commented Jul 7, 2025 •

edited

Loading

Meta file: packages/next/meta_index.json, Out file: esbuild/index.js

Meta file: packages/payload/meta_index.json, Out file: esbuild/index.js

Meta file: packages/payload/meta_shared.json, Out file: esbuild/exports/shared.js

Meta file: packages/richtext-lexical/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Meta file: packages/ui/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Meta file: packages/ui/meta_shared.json, Out file: esbuild/exports/shared_optimized/index.js

denolfe left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jul 7, 2025

Labels

3 participants

ci: analyze bundle size #13071

ci: analyze bundle size #13071

Uh oh!

Conversation

AlessioGr commented Jul 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

github-actions bot commented Jul 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 esbuild Bundle Analysis for payload

Meta file: packages/next/meta_index.json, Out file: esbuild/index.js

Meta file: packages/payload/meta_index.json, Out file: esbuild/index.js

Meta file: packages/payload/meta_shared.json, Out file: esbuild/exports/shared.js

Meta file: packages/richtext-lexical/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Meta file: packages/ui/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Meta file: packages/ui/meta_shared.json, Out file: esbuild/exports/shared_optimized/index.js

denolfe left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jul 7, 2025

Labels

3 participants

AlessioGr commented Jul 7, 2025 •

edited

Loading

github-actions bot commented Jul 7, 2025 •

edited

Loading