Reduce bundle size #168

nicosh · 2021-01-25T16:45:13Z

nicosh
Jan 25, 2021

Using many elements/components will drastically increase bundle size, let say we have 20 components in the dashboard, even if we use only 2 of them on our page, Craft.js will load the other 18 (since we have to pass those components to <Editor resolver={} />).
The ideal solution would be to use React.lazy() or next.js's Dynamic Import but none seems to work out of the box (i tried Dynamic Import without any success).
Edit 3
Following @ankri idea now im able to reduce bundle size not loading unused components, this is useful when you need to render you page built with craft.js :
My page looks similar to this :

....

import UserComponents from '../user/UCT';
import Editorfrom './editor';

...
export default function App({ data }) {
  let [json, setJson] = useState(false); // loading editor state from db
  let [UsC, setUsC] = useState(false); // loading only unsed components
  useEffect(() => {
    const loadComponents = async (j) => {
      let c = await UserComponents(j);
      setUsC(c)
    }
    const loadWebsite = async () => {
      let data = await loadPage();
      let json = data[0].json
      let converted = lz.decompress(lz.decodeBase64(json));
      const item = JSON.parse(converted)
      loadComponents(item)
      setJson(item)
    }
    loadWebsite()

  }, []);
  return (
    <>
      {json && UsC ? <Editor UserComponents={UsC} json={json} /> : <p>Loading...</p>}
    </>
  );
}

I dynamically load components from UCT.js

const CONTAINER= async ()=>{
    let {Container} = await import('./Container')
    return Container
}
const r = {
    Container : CONTAINER
}
const UserComponents = async(json)=> { 
    let array = JSON.parse(json)
    let keys = Object.keys(array)
    let Cnames = keys.map(el => array[el].type.resolvedName)
    let uniquenames = [...new Set(Cnames)];
    let resolver = r
    let map ={}
    for(const el of uniquenames){
        if(el !== undefined){
            let fn = resolver[el]
            let x = await fn()
            map[el] = x
        }
    }
    return map
}
export default UserComponents

editor.js:

import { Editor, Frame, Element } from "@craftjs/core";
export default function App({ json, UserComponents }) {
    return (
        <Editor enabled={false} resolver={UserComponents}>
            <Frame data={json} />
        </Editor>
    )
}

Edit 2
It seems that Craft.js resolver needs to import the function that generate the component, while react.lazy and next.js next/dynamic will import the component, so using default ES6 dynamic import just works.
Edit.
I tried to use next.js Dynamic import, basically I'm interested to use Dynamic Import only when rendering the page, i have a simple page similar to this :

import React, { useState, useEffect } from 'react';
import UserComponents from '../user/UC'; // <-- here i load components
import { resolveUserData,savePage,loadPage} from '../../lib/drivers';
import lz from "lzutf8";
Import Editor from './editor'
export default function App({data}) {
// other functions here
// json is the editor state saved in database
    return (
      <>
        <Head>
          <title>My website</title>
        </Head>
        <Editor enabled={false} resolver={UserComponents}>
          <Frame data={json} />
        </Editor>
      </>
    );
}

My UserComponents looks like this

import dynamic from 'next/dynamic'

const DS= dynamic(() =>
  import('./Section').then((mod) => mod.Section)
)
const Section= (d)=>{
    return <DS {...d} />
}

const UserComponents = {
    Section
}
export default UserComponents

This solution seems to work when components dont have childrens, instead if they have, the component will render the default (.craft.props) component data.
Example of a component with childrens :

export const Colonna = (inProps) => {
    const {style={},className=false,textAlign=false, height = false, bgImg = false, 
        bgImgOnly = false, background, paddingTop = false, paddingBottom = false,
        paddingRight = false, paddingLeft = false, children,
        marginTop = false, marginBottom = false, marginLeft = false, marginRight = false, larghezza
    } = inProps
    const { connectors: { connect, drag } } = useNode();
    return (
        <div ref={ref => connect(drag(ref))} className={`iscol ${cssClasses} ${textAlign}`} style={{background, ...backgroundcss }}>
            {children}
        </div>
    )
}

~~Do you have any suggestions or ideas on how to reduce bundle size?~~
Do you have any idea on how get Dynamic Import work properly?
Thanks

prevwong · 2021-01-26T09:13:19Z

prevwong
Jan 26, 2021
Maintainer

I'm a little confused with the example. Do you mind creating a Codesandbox that reproduces the issue?

6 replies

nicosh Jan 27, 2021
Author

@prevwong
I managed to use dynamic import for user components, but since the editor need a resolver to map all user components that will be used inside the editor, i think all the components will loaded and built in the same chunk . Do you think i'm right? Any ideas on how dynamically import user components?

ankri Jan 27, 2021
Collaborator

I have a suggestion. I do not know whether it would be possible or feasible, though.

Imagine we have 10 components and an already built layout. This layout only uses 3 components. Could you scan the layout before rendering the editor and filter out those components that would not be needed? The resolver map would then only contain those components that are needed and rendered.

Edit:
I get this error when trying to open the codesandbox above

nicosh Jan 27, 2021
Author

@ankri i stopped the sanbox because i managed to dynamically import components but it does not affect bundle size since the resolver needs all the components.
I already tried to load only used components and i had some errors, i will try again.
Another solution could be to render components as HTML as mentioned here :
#42 (comment)

prevwong Feb 3, 2021
Maintainer

@nicosh How did you manage to solve the dynamic import problem?

But I see your point about the bundle size - we could probably add a way to dynamically add/remove resolvers 🤔 Lets add this as a feature request.

nicosh Feb 3, 2021
Author

@prevwong I mangaed to import dynamic components using next.js dynamic, but also built in react lazy() works.
Basically my resolver looks like this :

const Section = dynamic(() =>
  import('./Section/pure').then((mod) => mod)
)
...other imports
const resolver = {
    Section,
    ...other components
}

By the way, in my case, this was not enough for reduce final bundle size for 2 main reasons.

Craft.js stuff still be injected in the final bundle
same for non used loadable componets

After many tries i managed to reduce bundle size in two steps

1 Render the page without craft.js and using dedicated commponents

Render the page with <Editor enabled={false} will load unecessary dependecies, instead i use a custom recoursive function.
However, we still have the problem that each components will load craft.js stuff (like useEditor or <Element>), also in my case, many components was using libraries useful only while creating the page.
For example the Text component is loading a WYSIWYG library (clicking the <textarea> will turn the content editable ) that i do not need in the frontend. So i decided to have two version for each component, one used by craft js and another one used only from the resolver in the fronted of the final page, for convenience in each component folder i add a pure.js file with the clean version of the component.
For rendering the page from craft.js state i use this function :
(usc is a function that returns only used components see below)

RenderNodes.js

import usc from '../user/UCT'
import React from 'react';
const rr = (nodes, id, i = 0) => {
  const uc = usc(nodes)
  const RenderNodes = (nodes, id, i = 0, UserComponents) => {
    let node = nodes[id]
    let type = node.type.hasOwnProperty("resolvedName") ? node.type.resolvedName : node.type
    type = (Object.keys(type).length === 0 && type.constructor === Object) ? "div" : type
    const ispure = node.type.hasOwnProperty("resolvedName") ? false : true
    let el = ispure ? node.type : UserComponents[type]
    el = (Object.keys(node.type).length === 0 && node.type.constructor === Object) ? "div" : el
    let childrens = node.nodes
    let childs = []
    let linked = Object.values(node.linkedNodes)
    for (const elm of childrens) {
      let y = RenderNodes(nodes, elm, i + 1,UserComponents)
      childs.push(y)
    }
    for (const elm of linked) {
      let y = RenderNodes(nodes, elm, i + 2,UserComponents)
      childs.push(y)
    }
    let props = node.props
    props.key = id
    if (el) {
      let COMPONENET = React.createElement(el, props, childs)
      return COMPONENET
    } else {
      return null
    }
  }
  return RenderNodes(nodes, id, i = 0,uc)
}

export default rr

2 Load only used dynamic components

Im not totally sure if the following solution really reduce bundle size, however... i load only used components in this way:
(UserComponents is a function that take craft.js serialized state and return the resolver object)
UTC.js

import dynamic from 'next/dynamic'
const Container = dynamic(() =>
  import('./Container/pure').then((mod) => mod.Container)
)
const Row = dynamic(() =>
  import('./Row/pure').then((mod) => mod.Row)
)
const r = {
    Container,
    Row
}
const UserComponents = (array) => {
    let keys = Object.keys(array)
    let Cnames = keys.map(el => array[el].type.resolvedName)
    let uniquenames = [...new Set(Cnames)]; // only used components
    let resolver = r                        // be sure that both components (craft.js and pure) have the same name
    let map = {}
    for (const el of uniquenames) {
        if (el !== undefined) {
            map[el] = resolver[el]
        }
    }
    return map
}
export default UserComponents

Finally my frontend page :

import lz from "lzutf8";
import React from 'react';
import { useRouter } from 'next/router';
import { loadPage } from '../../lib/drivers';
import RenderNodes from '../../components/utils/renderNodes'
import Head from 'next/head'

export default function App({ json, ssrData }) {
  const { isFallback } = useRouter();
  if (!isFallback) {
    let jsx = RenderNodes(json, "ROOT") // use this instead  <Editor
    return (
      <>
        {jsx}
      </>
    )
  } else {
    return <Loader />
  }
}

My drag and drop builder have 50+ components, before theese changes bundle size was huge and page speed results was really poor, now i have 95+ score from desktop (before was 60) and 65+ from mobile (before was 20), in page that loads about 15 components.

ssehacker · 2021-03-25T12:02:46Z

ssehacker
Mar 25, 2021

+1, The page size is too big if we have many components. @prevwong

3 replies

prevwong May 22, 2021
Maintainer

@nicosh @ssehacker

One way of going about this is to export a "dynamically loaded" version of the Component to the resolver:

// components/Button/Button.tsx
// 1) You write your User Component as usual here
export const Button = () => { ... } 

// components/Button/index.tsx
// 2) Here you expose that User Component using a dynamic wrapper
import dynamic from 'next/dynamic';

export const Button = dynamic(() => import('./Button.tsx'));

// editor.tsx
// 3) Then here you load the dynamically loaded version of the component in the resolver:
import { Button } from './components/Button/index';

<Editor resolver={{ Button }} />

While this solution is not the prettiest, I believe it should work for now. In the future, we could think about some improvements that we could do to the resolver.

nicosh May 26, 2021
Author

@prevwong as you can see in my previous comment i already use this kind of approach, but combined with the use of different components for the website builder and for the page created with the builder, imho at the moment this is the best solution, because most likely you are going to import in the component a lot of stuff that is useless in the final web page (things like rich text editors,craft.js core ecc...)

ankri May 26, 2021
Collaborator

Today @prevwong and I had an impromptu chat and we briefly discussed it and (mainly) Prev came up with an interesting suggestion for a new API for the resolver.

The basic version could look something like this:

// resolvers.tsx
import dynamic from 'next/dynamic'
 
const resolvers = Resolvers.new({
   Button: {
       render: dynamic(() => import('./Button'),
       config: { }
   }
});

// card.tsx
const Card = () => {
   return <Element id="linked" is={Resolver.get("Button")} /> 
}

With this dynamic imports would b more accessible in our opinion. Also we could expand on this idea.

We could for example pass a context (e.g. the editor state) to render

const resolvers = Resolvers.new({
   Button: {
       render: (context) => dynamic(() => { 
          if(context.isInDesignMode) {
            return import('./Button') };
          }
          else {
            return import('../runtime/Button');
          }
        }),
        config: { }
  }
});

With this approach we would be able to load different components and like you said would not need to import and bundle all the stuff like rich text editors and other code that's needed for editors and such things.

Also we played around with the idea to pass the json representation of the state to the resolver. With access to the json it should be possible to filter all the components that are needed which could result in an additional reduction of size.

Writing this down I am a bit unsure whether this would actually reduce the size if the components are lazily loaded in the first place. But maybe it could help for scenarios where a lazy load with next is not possible.

Last but not least we could maybe also add the ability to have evolutions (like database evolutions) for the components into the resolver.

Again writing this down I am not sure whether the resolver would be a good place. Maybe this should be handled inside the component. Nevertheless it would be great to have different versions for components (different topic though)

Rdonn · 2022-06-28T18:49:45Z

Rdonn
Jun 28, 2022

For those that stumble on this page looking for a temporary solution, here is what I have been doing:

The exported JSON should be enough to create your own solution. We can code-split based on our used components as follows.

// Editor Elements
const XXXX = {
  TestingBarChart: import('../BuilderComponents/BarChart'),
  //@ts-ignore
  Container: import('../BuilderComponents/Container'),
  //@ts-ignore
  Text: import('../BuilderComponents/Text'),
  BuilderApp: import('../BuilderComponents/BuilderApp'),
};

export default XXXX;

Recursively iterate over the provided JSON to create our tree

const [toRender, setToRender] = useState(null);

  useEffect(() => {
    const component = (() => {
      const parse = async (key: string) => {

        // no key, base case
        if (key == null || key == '') return null;
        const nodeNames: string[] = obj[key].nodes;
        // Exported components with import(...)
        let reactComp = await XXXX[obj[key].type.resolvedName];
        // if it has no child nodes base case
        if (nodeNames.length == 0) {
          return React.createElement(
            reactComp.default?.default ?? reactComp.default,
            {
              ...obj[key].props
            }
          )
        }

        //iterate over children and await result
        let nodes = nodeNames.map((key) => {
          return parse(key);
        })
        nodes = await Promise.all(nodes);
        
        return React.createElement(
          reactComp.default?.default ?? reactComp.default,
          {

            ...obj[key].props,
            children: nodes,
          }
        )
      }
      return parse('ROOT');
    })();

    const wait = async () => {
      const test = await component
      setToRender(test);
    }
    wait();
  }, [])



  return <React.Fragment>
    {toRender}
  </React.Fragment>;

Although I have not created the fallback components that do not use CraftJS dependencies yet, I can confirm that this is splitting the components how I want:

Tested this on the default webpack config for Redwood.JS.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reduce bundle size #168

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 9 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Reduce bundle size #168

nicosh Jan 25, 2021

Replies: 3 comments · 9 replies

prevwong Jan 26, 2021 Maintainer

nicosh Jan 27, 2021 Author

ankri Jan 27, 2021 Collaborator

nicosh Jan 27, 2021 Author

prevwong Feb 3, 2021 Maintainer

nicosh Feb 3, 2021 Author

1 Render the page without craft.js and using dedicated commponents

2 Load only used dynamic components

ssehacker Mar 25, 2021

prevwong May 22, 2021 Maintainer

nicosh May 26, 2021 Author

ankri May 26, 2021 Collaborator

Rdonn Jun 28, 2022

nicosh
Jan 25, 2021

Replies: 3 comments 9 replies

prevwong
Jan 26, 2021
Maintainer

nicosh Jan 27, 2021
Author

ankri Jan 27, 2021
Collaborator

nicosh Jan 27, 2021
Author

prevwong Feb 3, 2021
Maintainer

nicosh Feb 3, 2021
Author

ssehacker
Mar 25, 2021

prevwong May 22, 2021
Maintainer

nicosh May 26, 2021
Author

ankri May 26, 2021
Collaborator

Rdonn
Jun 28, 2022