Improve Speed Performance for My Landing Page Builder Project Using Grapesjs and React

46 views Asked by At

I'm currently working on a landing page builder project using Grapesjs; it works properly like I expected; the only problem is that the page is very slow whenever I drag and drop the blocks /components to the canvas. I added over 20 template blocks/components.

 useEffect(() => {
    getFileAssets();

    const editor = grapesjs.init({
      container: '#gjs',
      allowScripts: 1,
      selectorManager: { escapeName },
      canvas: {
        scripts: ['"https://cdn.jsdelivr.net/npm/npm link name", "another script link"']
      },
      plugins: [
        myPlugin,
        customCodePlugin,
        presetPlugin,
        pluginGrapesjsBlocksBasic,
        gjsForms,
        tailwindPlugin
      ],
      pluginsOpts: {
        [myPlugin]: {},
        [customCodePlugin]: {},
        [presetPlugin]: {},
        [pluginGrapesjsBlocksBasic]: {},
        [gjsForms]: {},
        [tailwindPlugin]: {
          config: templateConfig
        },
      }
    });

    getDataStorage(editor)
    getAllPanels(editor)
    getTitle(editor)

    editor.Panels.addPanel({
      id: 'panel-top',
      el: '.panel__top',
    });

    editor.runCommand('get-tailwindCss')
    const blockManager = editor.Blocks;

    blockManager.render();

    blockManager.getCategories();

    heroGrapesJs.call().map((x) =>
      blockManager.add(x.label,{
        label: `<img src="${x.image}" alt="${x.label}" >`,
        content: x.content,
        category: 'Hero',
        attributes: {
          title: 'Insert Image block',
          src: x.image,
          alt: x.label
        }
      })
    )

    blockManager.render()

    return () => {
      editor.destroy();
    };

  },[templateConfig]);

  return (
    <Stack width="full" height="full">
      <div>
        <div className="panel__top">
          <div className="panel__basic-actions"></div>
          <div className="panel__basic-display"></div>
        </div>
        <div id="gjs"></div>
      </div>
    </Stack>
  );
}

Is there a way to improve the speed? or could it be the problem is the way I handle my function? Or maybe I installed too many plugins?

The code works fine; the only problem is the speed. I thought the tailwind plugins is the cause of the performance issue, but modifying the plugin does not fix the problem

0

There are 0 answers