# Builder SDK size

**URL:** <https://forum.builder.io/t/builder-sdk-size/106>\
**Category:** Technical Questions\
**Created:** [May 27, 2020, 6:06pm UTC](https://forum.builder.io/t/builder-sdk-size/106 "2020-05-27T18:06:01Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![sage930](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@sage930](https://forum.builder.io/u/sage930)\
**Post date:** [May 27, 2020, 6:06pm UTC](https://forum.builder.io/t/builder-sdk-size/106/1 "2020-05-27T18:06:01Z")

</div>

We’re using [Builder.io](http://Builder.io) in a client-side React app. We’ve noticed Builder is adding 145 KB total to our bundle size, which is definitely not insignificant. Is there a more optimized build available? Is there a way to not include React in the Builder SDK for people like us who are already including React?

Thanks for any insights.

---

<div class="post-metadata">

**Author:** ![anon30523337](https://avatars.discourse-cdn.com/v4/letter/a/48db29/32.png) [@anon30523337](https://forum.builder.io/u/anon30523337)\
**Post date:** [May 27, 2020, 8:20pm UTC](https://forum.builder.io/t/builder-sdk-size/106/2 "2020-05-27T20:20:42Z")

</div>

Thanks for posting @sage930! Do you mind providing some more background on how you’re bundling `@builder.io/react` and measuring bundle size? When I look at the our ES5 module, it’s 95kb uncompressed, and 24kb after gzipping.

If you want more control over what’s loaded from the Builder library, you can use `@builder.io/react/lite`, which is 46kb uncompressed and 14kb gzipped. More details on how to use the lite package are here: [https://github.com/BuilderIO/builder/blob/master/packages/react/lite.js](https://github.com/BuilderIO/builder/blob/master/packages/react/lite.js)

If you are using React 14+ then Builder shouldn’t bundle React again. If you are using a bundle analyzer/sourcemap explorer, I’d be happy to dig deeper into what Builder might be adding to your JS bundle.

---

<div class="post-metadata">

**Author:** ![sage930](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@sage930](https://forum.builder.io/u/sage930)\
**Post date:** [May 27, 2020, 9:23pm UTC](https://forum.builder.io/t/builder-sdk-size/106/3 "2020-05-27T21:23:24Z")

</div>

I’m analyzing bundle sizes using [https://github.com/danvk/source-map-explorer](https://github.com/danvk/source-map-explorer). This is on a create react app-based app (react version 16.8.2) where Builder is imported in the application root, like this:

// Initialize [Builder.io](http://Builder.io)  
const { builder } = require(’@builder.io/react’)  
builder.init(process.env.REACT\_APP\_BUILDER\_IO\_PUBLIC\_API\_KEY)  
}

The 2 Builder packages we’re using are:  
“@builder.io/react”: “^1.1.13-9”,  
“@builder.io/widgets”: “^1.0.101”,

 ![builder-io](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/5da2f92cfbb40efcb286c77a04af6fb313593f1d.jpeg)

Good to know about the lite option!

---

<div class="post-metadata">

**Author:** ![anon30523337](https://avatars.discourse-cdn.com/v4/letter/a/48db29/32.png) [@anon30523337](https://forum.builder.io/u/anon30523337)\
**Post date:** [May 28, 2020, 2:43am UTC](https://forum.builder.io/t/builder-sdk-size/106/4 "2020-05-28T02:43:08Z")

</div>

Thanks for sending, that looks similar to what I was seeing in sourcemap-explorer in our SDK repo. While we will always strive to do better, I have a couple of quick ideas that might help in the short-term while we try to work additional performance improvements into our SDKs.

- If you’re using a CDN that supports HTTP/2, you can compress assets with brotli. This should result in a 15-20% smaller payload size vs gzip. If you can’t use HTTP/2 (I’ve been there…) then Zopfli is a good alternative that should result in 5-10% smaller payloads vs gzip

- Obviously payload size isn’t everything, there’s additional parse and execution time whenever you ship more JS to the browser. If you want to minimize your JS bundle-size then you could use our [HTML API](https://www.builder.io/c/docs/html-api) to fetch pre-rendered HTML and skip the SDK. Or, we have some customers using [GatsbyJS](https://www.gatsbyjs.com/) and [Builder webhooks](https://www.builder.io/c/docs/webhooks) to pre-render static pages whenever the Builder content changes. This takes a little more work to get setup, but will result in a super optimized user experience.

- Lastly, I mentioned this in a previous comment, but you want a quick and potentially easy improvement, you can use our [react-lite library](https://github.com/BuilderIO/builder/blob/master/packages/react/lite.js) to have more control over which pieces of Builder you’d like to include.

Hopefully this will spark some ideas on how to ensure that you can use Builder and ensure that you have a fast, user-friendly website! We’re always happy to brainstorm about performance optimizations 😃

In the future, we have some ideas on how to make our SDKs more tree-shakable (ensure no side-effects), as well an interesting approach to render components in a super-lightweight JSX wrapper. Please let us know if you have any additional thoughts!

---

<div class="post-metadata">

**Author:** ![sage930](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@sage930](https://forum.builder.io/u/sage930)\
**Post date:** [May 28, 2020, 6:26pm UTC](https://forum.builder.io/t/builder-sdk-size/106/5 "2020-05-28T18:26:08Z")

</div>

Thanks! Is the lite option documented anywhere? I’d like to know:

1. What its limitations are, other than needing to explicitly specify what Builder components we want enabled. Does the lite option still work if we’re importing some custom components of our own (Ex. a carousel component)?
2. How to use it under our current integration (just use the code from [https://github.com/BuilderIO/builder/blob/master/packages/react/lite.js](https://github.com/BuilderIO/builder/blob/master/packages/react/lite.js) in our application root? Do we still need to call Builder.init()?)
3. What `use this in conjunction with customInsertMenu` means. Is that something we’d set up in our application root as well, after we initialize Builder?

---

<div class="post-metadata">

**Author:** ![anon30523337](https://avatars.discourse-cdn.com/v4/letter/a/48db29/32.png) [@anon30523337](https://forum.builder.io/u/anon30523337)\
**Post date:** [May 29, 2020, 4:13pm UTC](https://forum.builder.io/t/builder-sdk-size/106/6 "2020-05-29T16:13:07Z")

</div>

1. The lite option should work with custom components. The main difference is that you need to specifically add any built-in components you want to use or they won’t show up.
2. To use the lite package, you change all your imports from `@buidler/react` to `@builder/react/lite` and then import any of the built-in components that you want to use:

```auto
    // Change all imports from '@builder.io/react' to '@builder.io/react/lite'
    import { BuilderComponent } from '@builder.io/react/lite';
  
    // Import only what built-in components you like
    import '@builder.io/react/dist/lib/src/blocks/Button';
    import '@builder.io/react/dist/lib/src/blocks/Columns';

```

1. So by default, the insert menu in the editor is going to show all the built-in block types that can be added (Image, Text, Carousel, etc). If you are using the lite version to not include some of these blocks in the SDK, then you won’t want them to show up in the editor. That’s why we recommend using a `customInsertMenu` to ensure that you don’t try to add blocks to your page that you aren’t able to render. Here’s an example of manually registering components in the insert menu: [https://github.com/BuilderIO/builder/blob/071119913aa6ea99947ead868893d340678b2482/examples/react-design-system/src/builder-settings.js#L23-L116](https://github.com/BuilderIO/builder/blob/071119913aa6ea99947ead868893d340678b2482/examples/react-design-system/src/builder-settings.js#L23-L116)

---

<div class="post-metadata">

**Author:** ![sage930](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@sage930](https://forum.builder.io/u/sage930)\
**Post date:** [June 1, 2020, 11:20pm UTC](https://forum.builder.io/t/builder-sdk-size/106/7 "2020-06-01T23:20:04Z")

</div>

Thanks for that. A few more questions since this “lite” option isn’t documented yet:

1. I noticed that not all components we use are available for import at `@builder.io/react/dist/lib/src`. Should we be importing Carousel from `@builder.io/widgets/dist/lib/components/`? What about Box? I don’t see that one anywhere.

2. How should we be importing `withBuilder` which we use in our custom components that we import into Builder? Do we still need to import that from `@builder.io/react`?

3. We had been using `import '@builder.io/widgets`. I assume we no longer need that, since we’re directly importing components that we’re using. Is that the case?

---

<div class="post-metadata">

**Author:** ![anon30523337](https://avatars.discourse-cdn.com/v4/letter/a/48db29/32.png) [@anon30523337](https://forum.builder.io/u/anon30523337)\
**Post date:** [June 2, 2020, 8:19pm UTC](https://forum.builder.io/t/builder-sdk-size/106/8 "2020-06-02T20:19:11Z")

</div>

If you are using a number of the built-in components, then the lite option might be more trouble than it’s worth. In other words, importing the built-in components limits the performance benefit while also adding some complexity to your integration.

That being said, I’ll try to answer you questions about how to use the lite library:

1. Right now, if you want to use anything from `@builder.io/widgets` you would likely need to import the full widgets library. One way to potentially solve this is to fork (copy) the widgets/components and register them as custom components in your private repo. Box is not a widget or component, it’s basically an empty element like:

```auto
{
  name: 'Box',
  item: { '@type': '@builder.io/sdk:Element' }
}

```

1. You can use `Builder.registerComponent`, an alias for `withBuilder`
2. You can still use that import, or as mentioned above, clone/copy the widget and import them individually.

If want to reimplement Box, you would need to use register it with a custom insert menu like in this example:

> <https://github.com/BuilderIO/builder/blob/master/examples/react-design-system/src/builder-settings.js#L23-L78>

Finally, just wanted to say thanks again for the feedback and effort to optimize your Builder integration! I’ll make sure we have additional performance optimizations on our roadmap as well as making it easier to use the “lite” library.

---

<div class="post-metadata">

**Author:** ![steve](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/steve/32/78_2.png) [@steve](https://forum.builder.io/u/steve)\
**Post date:** [August 12, 2020, 7:04pm UTC](https://forum.builder.io/t/builder-sdk-size/106/9 "2020-08-12T19:04:16Z")

</div>

Hey @sage930 - wanted to followup with another trick that may be useful here to keep your bundle size down and only load the Builder JS when a Builder component is actually displayed

A useful trick here would be to lazy load just the BuilderComponent, so for example instead of doing

```auto
import { BuilderComponent } from '@builder.io/react'

```

Instead create an async component for this, e.g. with [Loadable](https://github.com/jamiebuilds/react-loadable) or [suspense](https://reactjs.org/docs/concurrent-mode-suspense.html#what-suspense-is-not) and use that instead, e.g.

### With suspense:

```auto
// e.g. components/async-builder-component.jsx

const LazyBuilderComponent = React.lazy(() => import('@builder.io/react').then(res => res.BuilderComponent));

const AsyncBuilderComponent = (props) => (
  // Show a spinner while the profile is loading
  <React.Suspense fallback={<Spinner />}>
    <BuilderComponent {...props} />
  </React.Suspense>
)

export default AsyncBuilderComponent;

```

### Or with loadable:

```auto
// e.g. components/async-builder-component.jsx
import Loadable from 'react-loadable';

const AsyncBuilderComponent = Loadable({
  loader: () => import('@builder.io/react').then(res => res.BuilderComponent),
  loading: Spinner,
});

export default AsyncBuilderComponent;

```

Then replace anywhere in your code you have

```auto
import { BuilderComponent } from '@builder.io/react'

```

to

```auto
import BuilderComponent from './components/async-builder-component'

```

And now all your current code will work as needed, and all Builder SDK code will be removed from from your current bundle and split into a separate one that is only fetched asynchronously when Builder code will display, after the rest of your code has loaded

---

<div class="post-metadata">

**Author:** ![sage930](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@sage930](https://forum.builder.io/u/sage930)\
**Post date:** [August 13, 2020, 10:05pm UTC](https://forum.builder.io/t/builder-sdk-size/106/10 "2020-08-13T22:05:23Z")

</div>

Thanks for this. I was able to get lazy loading of `<BuilderComponent>` working with a slight modification of your code:

```auto
const LazyBuilderComponent = lazy(() => import('@builder.io/react')
  .then(module => ({ default: module.BuilderComponent }))

```

However, I’m still seeing Builder showing up in our main vendor JS bundle file ☹

 ![Screen Shot 2020-08-13 at 3.57.10 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/2a94047e6d2de7bfb19d31f6f8ea17e8d47c721a.jpeg)

We do code splitting per route, so our “catch-all” page which renders Builder pages when there’s a URL match is lazy loaded. I’m wondering if that’s getting in the way here. We also use CRA (not ejected), as another data point.

---

<div class="post-metadata">

**Author:** ![steve](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/steve/32/78_2.png) [@steve](https://forum.builder.io/u/steve)\
**Post date:** [October 5, 2020, 7:42pm UTC](https://forum.builder.io/t/builder-sdk-size/106/11 "2020-10-05T19:42:53Z")

</div>

Hey @sage930 - apologies I missed your reply somehow. If Builder is still in your bundle then it must be imported/referenced somewhere without using a dynamic import. Is there any chance it lives anywhere else in your code? One possible culprit would be registering your components, like

```auto
import { Builder } from '@builder.io/react'

Builder.registerComponent(...)

```

One workaround there is to make sure those components are loaded lazily as well, or separate the Builder.registerComponent(…) into a separate file and import that, e.g.

```auto
// src/builder-lazy.js

import { Builder, BuilderComponent } from '@builder.io/react';

// Register your components (or put each Builder.registerComponent in its own file and only import those files here)
Builder.registerComponent(...);
Builder.registerComponent(...);

export default BuilderComponent;

```

Then lazy import this file instead of @builder.io/react directly

```auto
const LazyBuilderComponent = lazy(() => import('./src/builder-lazy')

```

That way any other call to Builder, like Builder.registerComponent, is only in this lazy bundle as needed and not in your main one

---

<div class="post-metadata">

**Author:** ![sami](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/sami/32/613_2.png) [@sami](https://forum.builder.io/u/sami)\
**Post date:** [August 15, 2022, 11:37pm UTC](https://forum.builder.io/t/builder-sdk-size/106/12 "2022-08-15T23:37:41Z")

</div>

Our v2 React SDK (which does not have all React v1 SDK features, but is much more lightweight) is now out in Beta: [builder/README.md at main · BuilderIO/builder · GitHub](https://github.com/BuilderIO/builder/blob/main/packages/sdks/output/react/README.md)

example of how to use it: [builder/examples/react-v2 at main · BuilderIO/builder · GitHub](https://github.com/BuilderIO/builder/tree/main/examples/react-v2)

See [High bundle - Builder io React · Issue #1179 · BuilderIO/builder · GitHub](https://github.com/BuilderIO/builder/issues/1179) for more context

---

<div class="post-metadata">

**Author:** ![jarvis](https://avatars.discourse-cdn.com/v4/letter/j/e36b37/32.png) [@jarvis](https://forum.builder.io/u/jarvis)\
**Post date:** [August 30, 2023, 8:38am UTC](https://forum.builder.io/t/builder-sdk-size/106/13 "2023-08-30T08:38:59Z")

</div>

I am using React 18, but it will still bundle React. Is there any way to improve this?

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/c/cbd27e3030711615bf38055dc2cc39910defece0.jpeg)

---

<div class="post-metadata">

**Author:** ![sami](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/sami/32/613_2.png) [@sami](https://forum.builder.io/u/sami)\
**Post date:** [February 22, 2024, 8:05pm UTC](https://forum.builder.io/t/builder-sdk-size/106/14 "2024-02-22T20:05:17Z")

</div>

We are still in the process of fully documenting our gen2 React SDK, but it is worth noting that it is now in v1! If you are concerned with high bundle size, the Gen2 React SDK is your best bet.

> <https://github.com/BuilderIO/builder/blob/main/packages/sdks/output/react/CHANGELOG.md>

its total bundle size is 25kb, with zero dependencies:

- [bundlejs - Online bundler + npm package bundle size checker](https://bundlejs.com/?q=%40builder.io%2Fsdk-react)
- [@builder.io/sdk-react v1.0.3 ❘ Bundlephobia](https://bundlephobia.com/package/@builder.io/sdk-react@1.0.3)