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

* chore: lazy loading components to improve boundle size

* fix: typo

* chore: fix typo

src/components/FeedbackForm/Steps/Commons/FormHeader.jsx

@@ -0,0 +1,14 @@
+import React, { useState } from 'react';
+import { TextArea, Form } from 'semantic-ui-react';
+import { defineMessages } from 'react-intl';
+
+const FormHeader = ({ title, step, totalSteps, className }) => {
+  return (
+    <div className={className}>
+      <h6>{title}</h6>
+      <div>{`${step}/${totalSteps}`}</div>
+    </div>
+  );
+};
+
+export default FormHeader;

src/components/index.js

@@ -1,4 +1,25 @@
-export { FormHeader } from './FeedbackForm/Steps/Commons';
-export FeedbackForm from './FeedbackForm/FeedbackForm';
-export AnswersStep from './FeedbackForm/Steps/AnswersStep';
-export CommentsStep from './FeedbackForm/Steps/CommentsStep';
+import loadable from '@loadable/component';
+
+/*--------------------------------
+--- BUNDLE VoltoFeedbackView ---
+---------------------------------*/
+export const FormHeader = loadable(() =>
+  import(
+    /* webpackChunkName: "VoltoFeedbackView" */ './FeedbackForm/Steps/Commons/FormHeader'
+  ),
+);
+export const FeedbackForm = loadable(() =>
+  import(
+    /* webpackChunkName: "VoltoFeedbackView" */ './FeedbackForm/FeedbackForm'
+  ),
+);
+export const AnswersStep = loadable(() =>
+  import(
+    /* webpackChunkName: "VoltoFeedbackView" */ './FeedbackForm/Steps/AnswersStep'
+  ),
+);
+export const CommentsStep = loadable(() =>
+  import(
+    /* webpackChunkName: "VoltoFeedbackView" */ './FeedbackForm/Steps/CommentsStep'
+  ),
+);

src/components/manage/index.js

@@ -1,4 +1,19 @@
-export VFPanel from './VFPanel/VFPanel';
-export VFPanelMenu from './VFPanel/VFPanelMenu';
-export FeedbackComments from './VFPanel/FeedbackComments';
-export VFToolbar from './VFToolbar';
+import loadable from '@loadable/component';
+
+/*--------------------------------
+--- BUNDLE VoltoFeedbackManage ---
+---------------------------------*/
+export const VFPanel = loadable(() =>
+  import(/* webpackChunkName: "VoltoFeedbackManage" */ './VFPanel/VFPanel'),
+);
+export const VFPanelMenu = loadable(() =>
+  import(/* webpackChunkName: "VoltoFeedbackManage" */ './VFPanel/VFPanelMenu'),
+);
+export const FeedbackComments = loadable(() =>
+  import(
+    /* webpackChunkName: "VoltoFeedbackManage" */ './VFPanel/FeedbackComments'
+  ),
+);
+export const VFToolbar = loadable(() =>
+  import(/* webpackChunkName: "VoltoFeedbackManage" */ './VFToolbar'),
+);

src/components/widgets/index.js

@@ -1,2 +1,13 @@
-export HoneypotWidget from './HoneypotWidget/HoneypotWidget';
-export GoogleReCaptchaWidget from './GoogleReCaptchaWidget';
+import loadable from '@loadable/component';
+
+/*--------------------------------
+--- BOUNDLE VoltoFeedbackView ---
+---------------------------------*/
+export const HoneypotWidget = loadable(() =>
+  import(
+    /* webpackChunkName: "VoltoFeedbackView" */ './HoneypotWidget/HoneypotWidget'
+  ),
+);
+export const GoogleReCaptchaWidget = loadable(() =>
+  import(/* webpackChunkName: "VoltoFeedbackView" */ './GoogleReCaptchaWidget'),
+);

src/index.js

@@ -34,6 +34,7 @@ export {
   generateFeedbackCommentUUID,
   getNumberOfSteps,
 } from 'volto-feedback/helpers';
+
 export {
   GoogleReCaptchaWidget,
   HoneypotWidget,