BuilderIO / BuilderIO/builder

State stored is extremely wasteful

Open
#4,166 3 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
8.8k
Forks
1.2k
Avg merge
1d 6h
Merged PRs (30d)
17

Description

We're using Qwik and the main selling point is that it's efficient and stuff you don't need: code and state is treeshaken if it's no longer needed on the client/browser.

We've got 3x `` calls on the page which are populated via Builder API fetchOne calls:
- Header
- Footer
- Page

The header is about 25kb of data, yet once you shove it into a `` tag, the page grows by 1mb.

I've been going through the Minified SDK, commenting out code and refreshing to see what's mutating state to cause it to get serialized.

So far, the biggest thing I've found is that component metadata is serialized twice and it includes the fluff as well:

**1. Component Infos:**

I can set this to an empty array and the page gets 500kb lighter.

https://github.com/BuilderIO/builder/blob/main/packages/sdks/src/components/content/content.lite.tsx#L106-L115

**2. Registered Components:**

https://github.com/BuilderIO/builder/blob/main/packages/sdks/src/components/content/content.lite.tsx#L60-L76

You can see that all of the component metdata is being serialized as JSON here: https://github.com/BuilderIO/builder/blob/main/packages/sdks/src/functions/register-component.ts#L30-L39

After cleaning up the object from metadata that doesn't get used by the SDK (outside of inline editing):

```ts
function cleanObject(input: T, keysToRemove: string[]): T {
if (Array.isArray(input)) {
return input.map(item => cleanObject(item, keysToRemove)) as unknown as T;
}

if (input && typeof input === "object") {
const entries = Object.entries(input)
.filter(([key]) => !keysToRemove.includes(key))
.map(([key, value]) => [key, cleanObject(value, keysToRemove)]);

return Object.fromEntries(entries) as T;
}

return input;
}

cleanObject(info, ["canHaveChildren", "defaultChildren", "defaults", "defaultStyles", "description", "docsLink", "friendlyName", "helperText", "image", "requiredPermissions"]);
```

It saves another 403kb.... so in total there's around 1mb of metadata being serialized.

I also feel that features like the Inline Editing could be entirely shaken away unless the `?builder.editor` query parameter is present.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.