chore: lazy loading components to improve bundle size (#92)

* chore: lazy loading components to improve boundle size

* chore: removed comments

src/components/index.js

@@ -0,0 +1,39 @@
+import loadable from '@loadable/component';
+
+/*--------------------------------
+--- BOUNDLE VoltoFormBlockView ---
+---------------------------------*/
+export const View = loadable(() =>
+  import(
+    /* webpackChunkName: "VoltoFormBlockView" */ 'volto-form-block/components/View'
+  ),
+);
+export const FormView = loadable(() =>
+  import(
+    /* webpackChunkName: "VoltoFormBlockView" */ 'volto-form-block/components/FormView'
+  ),
+);
+export const Field = loadable(() =>
+  import(
+    /* webpackChunkName: "VoltoFormBlockView" */ 'volto-form-block/components/Field'
+  ),
+);
+
+/*--------------------------------
+--- BOUNDLE VoltoFormBlockEdit ---
+---------------------------------*/
+export const Edit = loadable(() =>
+  import(
+    /* webpackChunkName: "VoltoFormBlockEdit" */ 'volto-form-block/components/Edit'
+  ),
+);
+export const Sidebar = loadable(() =>
+  import(
+    /* webpackChunkName: "VoltoFormBlockEdit" */ 'volto-form-block/components/Sidebar'
+  ),
+);
+export const EditBlock = loadable(() =>
+  import(
+    /* webpackChunkName: "VoltoFormBlockEdit" */ 'volto-form-block/components/EditBlock'
+  ),
+);

src/index.js

@@ -1,11 +1,15 @@
 import loadable from '@loadable/component';
 import formSVG from '@plone/volto/icons/form.svg';
-import View from 'volto-form-block/components/View';
-import Edit from 'volto-form-block/components/Edit';
-import FormView from 'volto-form-block/components/FormView';
-import Sidebar from 'volto-form-block/components/Sidebar';
-import EditBlock from 'volto-form-block/components/EditBlock';
-import Field from 'volto-form-block/components/Field';
+
+import {
+  View,
+  Edit,
+  FormView,
+  Sidebar,
+  EditBlock,
+  Field,
+} from 'volto-form-block/components';
+
 import { downloadFile, getFieldName } from 'volto-form-block/components/utils';
 import {
   submitForm,
@@ -81,11 +85,11 @@ const applyConfig = (config) => {
     clearFormData,
   };
 
-  config.settings.loadables['HCaptcha'] = loadable(
-    () => import('@hcaptcha/react-hcaptcha'),
+  config.settings.loadables['HCaptcha'] = loadable(() =>
+    import('@hcaptcha/react-hcaptcha'),
   );
-  config.settings.loadables['GoogleReCaptcha'] = loadable.lib(
-    () => import('react-google-recaptcha-v3'),
+  config.settings.loadables['GoogleReCaptcha'] = loadable.lib(() =>
+    import('react-google-recaptcha-v3'),
   );
 
   return config;