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