State stored is extremely wasteful #4166
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 <Content> 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 <Content> 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.
2. Registered Components:
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):
function cleanObject<T>(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.