Optimize bundle chunks

.storybook/preview.js

@@ -6,7 +6,6 @@ import 'design-token-editor/lib/css/root.css';
 import 'flatpickr';
 import 'flatpickr/dist/l10n/nl.js';
 import lodash from 'lodash';
-import {fixIconUrls as fixLeafletIconUrls} from 'map';
 import {initialize, mswLoader} from 'msw-storybook-addon';
 import {Formio, Templates} from 'react-formio';
 import {setAppElement} from 'react-modal';
@@ -39,8 +38,6 @@ initialize({
   },
 });
 
-fixLeafletIconUrls();
-
 // Added because of the warning for the react-modal
 // This is needed so screen readers don't see main content when modal is opened
 setAppElement('#storybook-root');

src/components/FormStep/index.jsx

@@ -24,8 +24,7 @@
 import cloneDeep from 'lodash/cloneDeep';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import {useContext, useRef} from 'react';
-import {Form} from 'react-formio';
+import {Suspense, lazy, useContext, useRef} from 'react';
 import {useIntl} from 'react-intl';
 import {useNavigate, useParams} from 'react-router';
 import {useAsync} from 'react-use';
@@ -49,12 +48,23 @@
   findPreviousApplicableStep,
   isLastStep,
 } from 'components/utils';
-import {PREFIX} from 'formio/constants';
 import useFormContext from 'hooks/useFormContext';
 import useTitle from 'hooks/useTitle';
+import {PREFIX} from 'utils';
 
 import {doLogicCheck, getCustomValidationHook, submitStepData} from './data';
 
+// Dynamically import react-formio and use React.lazy to facilitate bundle splitting
+// into separate chunks.
+const Form = lazy(async () => {
+  // this should already have been resolved the the sdk.jsx entrypoint :)
+  const {Form, initializeFormio} = await import('formio-init');
+  // side effect to ensure our custom templates/module are set up
+  initializeFormio();
+  // React.lazy must yield a 'default export'
+  return {default: Form};
+});
+
 /**
  * Debounce interval in milliseconds (1000ms equals 1s) to prevent excessive amount of logic checks.
  * @type {number}
@@ -768,64 +778,66 @@
               headingType="subtitle"
               modifiers={['padded']}
             />
-            <form onSubmit={onReactSubmit} noValidate>
-              <Form
-                ref={formRef}
-                form={configuration}
-                onChange={onFormIOChange}
-                onSubmit={onFormIOSubmit}
-                onInitialized={onFormIOInitialized}
-                options={{
-                  noAlerts: true,
-                  baseUrl: config.baseUrl,
-                  language: formioTranslations.language,
-                  i18n: formioTranslations.i18n,
-                  evalContext: {
-                    ofPrefix: `${PREFIX}-`,
-                    requiredFieldsWithAsterisk: config.requiredFieldsWithAsterisk,
-                  },
-                  hooks: {
-                    customValidation: getCustomValidationHook(submissionStep.url, error =>
-                      dispatch({type: 'ERROR', payload: error})
-                    ),
-                  },
-                  // custom options
-                  intl,
-                  ofContext: {
-                    form: form,
-                    submissionUuid: submission.id,
-                    submissionUrl: submission.url,
-                    saveStepData: async () =>
-                      await submitStepData(submissionStep.url, {...getCurrentFormData()}),
-                    verifyEmailCallback: ({key, email}) => {
-                      // clear the errors from the component
-                      const formInstance = formRef.current.formio;
-                      const component = formInstance.getComponent(key);
-                      component.setCustomValidity('');
-
-                      dispatch({
-                        type: 'VERIFY_EMAIL',
-                        payload: {componentKey: key, emailAddress: email},
-                      });
+            <Suspense fallback={<Loader modifiers={['centered']} />}>
+              <form onSubmit={onReactSubmit} noValidate>
+                <Form
+                  ref={formRef}
+                  form={configuration}
+                  onChange={onFormIOChange}
+                  onSubmit={onFormIOSubmit}
+                  onInitialized={onFormIOInitialized}
+                  options={{
+                    noAlerts: true,
+                    baseUrl: config.baseUrl,
+                    language: formioTranslations.language,
+                    i18n: formioTranslations.i18n,
+                    evalContext: {
+                      ofPrefix: `${PREFIX}-`,
+                      requiredFieldsWithAsterisk: config.requiredFieldsWithAsterisk,
+                    },
+                    hooks: {
+                      customValidation: getCustomValidationHook(submissionStep.url, error =>
+                        dispatch({type: 'ERROR', payload: error})
+                      ),
+                    },
+                    // custom options
+                    intl,
+                    ofContext: {
+                      form: form,
+                      submissionUuid: submission.id,
+                      submissionUrl: submission.url,
+                      saveStepData: async () =>
+                        await submitStepData(submissionStep.url, {...getCurrentFormData()}),
+                      verifyEmailCallback: ({key, email}) => {
+                        // clear the errors from the component
+                        const formInstance = formRef.current.formio;
+                        const component = formInstance.getComponent(key);
+                        component.setCustomValidity('');
+
+                        dispatch({
+                          type: 'VERIFY_EMAIL',
+                          payload: {componentKey: key, emailAddress: email},
+                        });
+                      },
                     },
-                  },
-                }}
-              />
-              {config.debug ? <FormStepDebug data={getCurrentFormData()} /> : null}
-              <ButtonsToolbar
-                canSubmitStep={canSubmit}
-                canSubmitForm={submission.submissionAllowed}
-                canSuspendForm={form.suspensionAllowed}
-                isAuthenticated={submission.isAuthenticated}
-                isLastStep={isLastStep(currentStepIndex, submission)}
-                isCheckingLogic={logicChecking}
-                loginRequired={form.loginRequired}
-                onFormSave={onFormSave}
-                onNavigatePrevPage={onPrevPage}
-                previousPage={previousPage}
-                onDestroySession={onDestroySession}
-              />
-            </form>
+                  }}
+                />
+                {config.debug ? <FormStepDebug data={getCurrentFormData()} /> : null}
+                <ButtonsToolbar
+                  canSubmitStep={canSubmit}
+                  canSubmitForm={submission.submissionAllowed}
+                  canSuspendForm={form.suspensionAllowed}
+                  isAuthenticated={submission.isAuthenticated}
+                  isLastStep={isLastStep(currentStepIndex, submission)}
+                  isCheckingLogic={logicChecking}
+                  loginRequired={form.loginRequired}
+                  onFormSave={onFormSave}
+                  onNavigatePrevPage={onPrevPage}
+                  previousPage={previousPage}
+                  onDestroySession={onDestroySession}
+                />
+              </form>
+            </Suspense>
           </>
         ) : null}
       </Card>

src/components/FormStepSummary/ComponentValueDisplay.jsx

@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {Suspense} from 'react';
 import {FormattedDate, FormattedMessage, FormattedNumber, FormattedTime, useIntl} from 'react-intl';
 
 import Anchor from 'components/Anchor';
 import Body from 'components/Body';
 import CoSignOld from 'components/CoSign';
 import Image from 'components/Image';
 import List from 'components/List';
+import Loader from 'components/Loader';
 import Map from 'components/Map';
 import {getFormattedDateString, getFormattedTimeString} from 'utils';
 
@@ -189,7 +190,11 @@ const MapDisplay = ({component, value}) => {
     return <EmptyDisplay />;
   }
 
-  return <Map geoJsonGeometry={value} disabled tileLayerUrl={component.tileLayerUrl} />;
+  return (
+    <Suspense fallback={<Loader modifiers={['centered']} />}>
+      <Map geoJsonGeometry={value} disabled tileLayerUrl={component.tileLayerUrl} />
+    </Suspense>
+  );
 };
 
 const CoSignDisplay = ({value}) => {

src/components/FormStepSummary/utils.jsx

@@ -1,5 +1,3 @@
-import {Utils as FormioUtils} from 'formiojs';
-
 const getComponentLabel = component => {
   if (component === undefined) {
     // If no component is found then just return an empty string
@@ -39,21 +37,4 @@ const humanFileSize = size => {
   return {size: newSize, unit};
 };
 
-// Duplicate code from Open Forms Admin
-const isChildOfEditGrid = (component, configuration) => {
-  // Get all edit grids in the configuration
-  let editGrids = [];
-  FormioUtils.eachComponent(configuration.components, configComponent => {
-    if (configComponent.type === 'editgrid') editGrids.push(configComponent);
-  });
-
-  // Check if our component is in the editgrid
-  for (const editGrid of editGrids) {
-    const foundComponent = FormioUtils.getComponent(editGrid.components, component.key, true);
-    if (foundComponent) return true;
-  }
-
-  return false;
-};
-
-export {getComponentLabel, humanFileSize, isChildOfEditGrid};
+export {getComponentLabel, humanFileSize};