Bundle optimization

docs/source/contributing/bundle-size-optimization.md

@@ -0,0 +1,42 @@
+---
+myst:
+  html_meta:
+    "description": "Bundle size optimization in Volto"
+    "property=og:description": "Bundle size optimization in Volto"
+    "property=og:title": "Bundle size optimization"
+    "keywords": "Volto, Plone, frontend, React, Performance, guidelines"
+---
+
+(bundle-size-optimization-label)=
+
+# Bundle size optimization
+
+This document describes how to optimize the bundle size of components through {term}`lazy loading` to improve page load times.
+Contributors to Volto core should follow the guidelines in this document.
+
+
+## Lazy loading in core
+
+Since Volto 18, several core components use lazy loading to keep the final build size under control.
+
+For example, the `Form` components are lazy loaded, which means that the code for the form components is only loaded when the user navigates to a page that contains a form.
+A new index file has been created at `packages/volto/src/components/manage/Form/index.tsx` that exports the form components with lazy loading.
+The `export`s in the main components index (`packages/volto/src/components/index.js`) have been updated to export components from the new specific index.
+The same goes for other components that have been lazy loaded, such as the control panels and widgets.
+
+Several `import` statements have been updated to use the new lazy loaded components.
+For example, the `Form` component is now imported from `@plone/volto/components/manage/Form` instead of `@plone/volto/components/manage/Form/Form`.
+You should keep this in mind, and always import components from the specific component index files when available, while avoiding importing components from the main components index file, if possible.
+This should also help to reduce circular dependencies, and help the overall build performance in the long run.
+
+
+### Unit test components that use lazy loaded components
+
+If you import a component from a lazy loaded index, you can have issues with rendering these in unit tests.
+Mocks are provided for lazy loaded components and are available for you to use.
+This can be done by using the `jest.mock` function to mock the specific component index.
+For example, to mock the `Form` component and all other components in the `Form`-specific index, you can use the following code in your test file:
+
+```javascript
+jest.mock('@plone/volto/components/manage/Form');
+```

docs/source/contributing/index.md

@@ -47,12 +47,14 @@ The Volto Team reviews pull requests only from people with a GitHub account who
 ```{include} ./branch-policy.md
 ```
 
+
 (contributing-install-volto-for-development-label)=
 
 ## Install Volto for development
 
 For developing Volto, follow {doc}`developing-core`.
 
+
 (contributing-translations-label)=
 
 ## Translations
@@ -125,6 +127,7 @@ redux
 routing
 icons
 accessibility-guidelines
+bundle-size-optimization
 typescript
 volto-core-addons
 version-policy

packages/coresandbox/src/components/Blocks/TestBlock/Data.tsx

@@ -1,5 +1,5 @@
 import { useIntl } from 'react-intl';
-import { BlockDataForm } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import type { BlockEditProps } from '@plone/types';
 
 const TestBlockData = (props: BlockEditProps) => {

packages/volto-slate/news/5295.internal

@@ -0,0 +1 @@
+Update imports to work with the new code split components in Volto. @pnicolli

packages/volto-slate/src/blocks/Table/TableBlockEdit.jsx

@@ -11,7 +11,8 @@ import cx from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import Cell from './Cell';
-import { BlockDataForm, Icon, SidebarPortal } from '@plone/volto/components';
+import { Icon, SidebarPortal } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import TableSchema from './schema';
 
 import rowBeforeSVG from '@plone/volto/icons/row-before.svg';

packages/volto-slate/src/blocks/Text/DefaultTextBlockEditor.jsx

@@ -12,11 +12,8 @@ import {
   validateFileUploadSize,
 } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
-import {
-  BlockDataForm,
-  SidebarPortal,
-  BlockChooserButton,
-} from '@plone/volto/components';
+import { SidebarPortal, BlockChooserButton } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 import { SlateEditor } from '@plone/volto-slate/editor';
 import { serializeNodesToText } from '@plone/volto-slate/editor/render';

packages/volto-slate/src/elementEditor/PluginEditor.jsx

@@ -3,7 +3,8 @@ import { isEqual } from 'lodash';
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { ReactEditor } from 'slate-react';
-import { Icon as VoltoIcon, BlockDataForm } from '@plone/volto/components';
+import { Icon as VoltoIcon } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import { setPluginOptions } from '@plone/volto-slate/actions';
 import BaseSchemaProvider from './SchemaProvider';
 

packages/volto-slate/src/widgets/HtmlSlateWidget.jsx

@@ -9,7 +9,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { Provider, useSelector } from 'react-redux';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets';
 import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
 import { makeEditor } from '@plone/volto-slate/utils';

packages/volto-slate/src/widgets/ObjectByTypeWidget.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Menu, Tab } from 'semantic-ui-react';
-import { Icon, ObjectWidget } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import { ObjectWidget } from '@plone/volto/components/manage/Widgets';
 
 export const ObjectByTypeWidget = (props) => {
   const { schemas, value = {}, onChange, errors = {}, id } = props;

packages/volto-slate/src/widgets/RichTextWidget.jsx

@@ -6,7 +6,7 @@
 import React from 'react';
 import isUndefined from 'lodash/isUndefined';
 import isString from 'lodash/isString';
-import { FormFieldWrapper } from '@plone/volto/components';
+import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets';
 import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
 
 import { createEmptyParagraph, createParagraph } from '../utils/blocks';

packages/volto/cypress/support/commands.js

@@ -702,10 +702,7 @@ Cypress.Commands.add(
   'pasteClipboard',
   { prevSubject: true },
   (query, htmlContent) => {
-    return cy
-      .wrap(query)
-      .type(' {backspace}')
-      .trigger('paste', createHtmlPasteEvent(htmlContent));
+    return cy.wrap(query).trigger('paste', createHtmlPasteEvent(htmlContent));
   },
 );
 

packages/volto/cypress/support/e2e.js

@@ -5,6 +5,15 @@ import './commands';
 import { setupGuillotina, tearDownGuillotina } from './guillotina';
 import { setup, teardown } from './reset-fixture';
 
+Cypress.on('uncaught:exception', (err) => {
+  // We are getting this error in Cypress tests but we don't use ResizeObserver ourselves
+  if (/ResizeObserver loop/.test(err.message)) {
+    // returning false here prevents Cypress from
+    // failing the test
+    return false;
+  }
+});
+
 before(function () {
   if (Cypress.env('API') === 'guillotina') {
     tearDownGuillotina({ allowFail: true });

packages/volto/cypress/tests/core/controlpanels/upgrade.js

@@ -39,11 +39,12 @@ describe('Upgrade Site Tests', () => {
       body: {
         ...getUpgradeNeedsUpgrade,
       },
-    }).as('getSystemNeedsUpdate');
+    }).as('getUpgradeNeedsUpgrade');
     cy.navigate('controlpanel');
     cy.wait('@getSystemNeedsUpdate');
 
     cy.findByText('Please continue with the upgrade.').click();
+    cy.wait('@getUpgradeNeedsUpgrade');
     cy.get('.content-area').contains(
       'The site configuration is outdated and needs to be upgraded.',
     );

packages/volto/news/5295.internal

@@ -0,0 +1 @@
+Reduced JavaScript bundle size of the production build. Code split several internal modules: Controlpanels, Form, Widgets among other small ones. @pnicolli @deodorhunter

packages/volto/package.json

@@ -301,6 +301,7 @@
     "@testing-library/react": "14.2.0",
     "@testing-library/react-hooks": "8.0.1",
     "@types/jest": "^29.5.8",
+    "@types/loadable__component": "^5.13.9",
     "@types/lodash": "^4.14.201",
     "@types/react": "^18",
     "@types/react-dom": "^18",

packages/volto/src/components/index.js

@@ -75,39 +75,54 @@ export { default as AlbumView } from '@plone/volto/components/theme/View/AlbumVi
 
 export { default as Actions } from '@plone/volto/components/manage/Actions/Actions';
 export { default as Add } from '@plone/volto/components/manage/Add/Add';
-export { default as AddonsControlpanel } from '@plone/volto/components/manage/Controlpanels/AddonsControlpanel';
-export { default as UndoControlpanel } from '@plone/volto/components/manage/Controlpanels/UndoControlpanel';
-export { default as Contents } from '@plone/volto/components/manage/Contents/Contents';
+export {
+  Controlpanels,
+  Controlpanel,
+  RulesControlpanel,
+  AddRuleControlpanel,
+  EditRuleControlpanel,
+  ConfigureRuleControlpanel,
+  UsersControlpanel,
+  RenderUsers,
+  UserGroupMembershipControlPanel,
+  GroupsControlpanel,
+  RenderGroups,
+  RelationsControlpanel,
+  AliasesControlpanel,
+  UndoControlpanel,
+  AddonsControlpanel,
+  ContentType,
+  ContentTypeLayout,
+  ContentTypeSchema,
+  ContentTypes,
+  VersionOverview,
+  UpgradeControlPanel,
+  ModerateComments,
+  DatabaseInformation,
+} from '@plone/volto/components/manage/Controlpanels';
+
 export { default as Circle } from '@plone/volto/components/manage/Contents/circle';
-export { default as DatabaseInformation } from '@plone/volto/components/manage/Controlpanels/DatabaseInformation';
-export { default as Controlpanel } from '@plone/volto/components/manage/Controlpanels/Controlpanel';
-export { default as Controlpanels } from '@plone/volto/components/manage/Controlpanels/Controlpanels';
-export { default as AliasesControlpanel } from '@plone/volto/components/manage/Controlpanels/Aliases';
-export { default as ContentTypes } from '@plone/volto/components/manage/Controlpanels/ContentTypes';
-export { default as ContentType } from '@plone/volto/components/manage/Controlpanels/ContentType';
-export { default as ContentTypeLayout } from '@plone/volto/components/manage/Controlpanels/ContentTypeLayout';
-export { default as ContentTypeSchema } from '@plone/volto/components/manage/Controlpanels/ContentTypeSchema';
-export { default as ContentTypesActions } from '@plone/volto/components/manage/Controlpanels/ContentTypesActions';
-export { default as UsersControlpanel } from '@plone/volto/components/manage/Controlpanels/Users/UsersControlpanel';
-export { default as UserGroupMembershipControlPanel } from '@plone/volto/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel';
-export { default as Relations } from '@plone/volto/components/manage/Controlpanels/Relations/Relations';
-export { default as GroupsControlpanel } from '@plone/volto/components/manage/Controlpanels/Groups/GroupsControlpanel';
-export { default as RulesControlpanel } from '@plone/volto/components/manage/Controlpanels/Rules/Rules';
-export { default as AddRuleControlpanel } from '@plone/volto/components/manage/Controlpanels/Rules/AddRule';
-export { default as EditRuleControlpanel } from '@plone/volto/components/manage/Controlpanels/Rules/EditRule';
-export { default as ConfigureRuleControlpanel } from '@plone/volto/components/manage/Controlpanels/Rules/ConfigureRule';
-export { default as UpgradeControlPanel } from '@plone/volto/components/manage/Controlpanels/UpgradeControlPanel';
-
-export { default as ModerateComments } from '@plone/volto/components/manage/Controlpanels/ModerateComments';
-export { default as VersionOverview } from '@plone/volto/components/manage/Controlpanels/VersionOverview';
+
 export { default as Delete } from '@plone/volto/components/manage/Delete/Delete';
-export { default as Diff } from '@plone/volto/components/manage/Diff/Diff';
+export const Diff = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "HistoryView" */ '@plone/volto/components/manage/Diff/Diff'
+    ),
+);
+export const DiffField = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "HistoryView" */ '@plone/volto/components/manage/Diff/DiffField'
+    ),
+);
 export { default as Display } from '@plone/volto/components/manage/Display/Display';
 export { default as Edit } from '@plone/volto/components/manage/Edit/Edit';
-export { default as ModalForm } from '@plone/volto/components/manage/Form/ModalForm';
 export { default as History } from '@plone/volto/components/manage/History/History';
 export { default as Sharing } from '@plone/volto/components/manage/Sharing/Sharing';
-export { default as Rules } from '@plone/volto/components/manage/Rules/Rules';
+export const Rules = loadable(
+  () => import('@plone/volto/components/manage/Rules/Rules'),
+);
 export { default as Aliases } from '@plone/volto/components/manage/Aliases/Aliases';
 export { default as LinksToItem } from '@plone/volto/components/manage/LinksToItem/LinksToItem';
 export { default as Workflow } from '@plone/volto/components/manage/Workflow/Workflow';
@@ -124,58 +139,74 @@ export { default as Types } from '@plone/volto/components/manage/Toolbar/Types';
 export { default as Toast } from '@plone/volto/components/manage/Toast/Toast';
 export { default as ManageTranslations } from '@plone/volto/components/manage/Multilingual/ManageTranslations';
 
-// Potentially could ve removed from index, since they are internal components and
-// we don't want them to end up in the main chunk
-export { default as Form } from '@plone/volto/components/manage/Form/Form';
-export { default as BlocksToolbar } from '@plone/volto/components/manage/Form/BlocksToolbar';
-export { default as UndoToolbar } from '@plone/volto/components/manage/Form/UndoToolbar';
-export { default as Field } from '@plone/volto/components/manage/Form/Field';
+export {
+  Field,
+  InlineForm,
+  ModalForm,
+  UndoToolbar,
+  BlocksToolbar,
+  BlockDataForm,
+  BlocksForm,
+  Form,
+} from '@plone/volto/components/manage/Form';
 export { default as SearchTags } from '@plone/volto/components/theme/Search/SearchTags';
-export { default as CommentEditModal } from '@plone/volto/components/theme/Comments/CommentEditModal';
-export { default as ContentsBreadcrumbs } from '@plone/volto/components/manage/Contents/ContentsBreadcrumbs';
-export { default as ContentsIndexHeader } from '@plone/volto/components/manage/Contents/ContentsIndexHeader';
-export { default as ContentsItem } from '@plone/volto/components/manage/Contents/ContentsItem';
-export { default as ContentsUploadModal } from '@plone/volto/components/manage/Contents/ContentsUploadModal';
-export { default as ContentsPropertiesModal } from '@plone/volto/components/manage/Contents/ContentsPropertiesModal';
-export { default as ContentsRenameModal } from '@plone/volto/components/manage/Contents/ContentsRenameModal';
-export { default as ContentsWorkflowModal } from '@plone/volto/components/manage/Contents/ContentsWorkflowModal';
-export { default as ContentsTagsModal } from '@plone/volto/components/manage/Contents/ContentsTagsModal';
-export { default as RenderUsers } from '@plone/volto/components/manage/Controlpanels/Users/RenderUsers';
-export { default as RenderGroups } from '@plone/volto/components/manage/Controlpanels/Groups/RenderGroups';
-export { default as DiffField } from '@plone/volto/components/manage/Diff/DiffField';
+export { CommentEditModal } from '@plone/volto/components/theme/Comments';
+export {
+  Contents,
+  ContentsBreadcrumbs,
+  ContentsIndexHeader,
+  ContentsItem,
+  ContentsUploadModal,
+  ContentsPropertiesModal,
+  ContentsRenameModal,
+  ContentsWorkflowModal,
+  ContentsTagsModal,
+} from '@plone/volto/components/manage/Contents';
 export { default as DragDropList } from '@plone/volto/components/manage/DragDropList/DragDropList';
-export { default as InlineForm } from '@plone/volto/components/manage/Form/InlineForm';
-export { default as BlocksForm } from '@plone/volto/components/manage/Blocks/Block/BlocksForm';
-export { default as BlockDataForm } from '@plone/volto/components/manage/Form/BlockDataForm';
-
-export { default as FormFieldWrapper } from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
-export { default as ArrayWidget } from '@plone/volto/components/manage/Widgets/ArrayWidget';
-export { default as CheckboxWidget } from '@plone/volto/components/manage/Widgets/CheckboxWidget';
 
-export const DatetimeWidget = loadable(
-  () => import('@plone/volto/components/manage/Widgets/DatetimeWidget'),
+export {
+  AlignWidget,
+  ButtonsWidget,
+  ArrayWidget,
+  CheckboxWidget,
+  FileWidget,
+  IdWidget,
+  PasswordWidget,
+  QueryWidget,
+  QuerySortOnWidget,
+  QuerystringWidget,
+  SchemaWidget,
+  SelectWidget,
+  TextareaWidget,
+  TextWidget,
+  TokenWidget,
+  WysiwygWidget,
+  UrlWidget,
+  InternalUrlWidget,
+  EmailWidget,
+  NumberWidget,
+  ImageSizeWidget,
+  RegistryImageWidget,
+  ReferenceWidget,
+  ObjectBrowserWidget,
+  ObjectWidget,
+  ObjectListWidget,
+  VocabularyTermsWidget,
+  SelectMetadataWidget,
+  SelectAutoComplete,
+  ColorPickerWidget,
+  DatetimeWidget,
+  RecurrenceWidget,
+  FormFieldWrapper,
+} from '@plone/volto/components/manage/Widgets';
+
+export const SchemaWidgetFieldset = loadable(
+  () => import('@plone/volto/components/manage/Widgets/SchemaWidgetFieldset'),
 );
-export const RecurrenceWidget = loadable(
-  () =>
-    import(
-      '@plone/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget'
-    ),
+export const ObjectBrowserWidgetMode = loadable(
+  () => import('@plone/volto/components/manage/Widgets/ObjectBrowserWidget'),
 );
 
-export { default as FileWidget } from '@plone/volto/components/manage/Widgets/FileWidget';
-export { default as IdWidget } from '@plone/volto/components/manage/Widgets/IdWidget';
-export { default as PasswordWidget } from '@plone/volto/components/manage/Widgets/PasswordWidget';
-export { default as ReferenceWidget } from '@plone/volto/components/manage/Widgets/ReferenceWidget';
-export { default as SchemaWidget } from '@plone/volto/components/manage/Widgets/SchemaWidget';
-export { default as SchemaWidgetFieldset } from '@plone/volto/components/manage/Widgets/SchemaWidgetFieldset';
-export { default as SelectWidget } from '@plone/volto/components/manage/Widgets/SelectWidget';
-export { default as TextareaWidget } from '@plone/volto/components/manage/Widgets/TextareaWidget';
-export { default as TextWidget } from '@plone/volto/components/manage/Widgets/TextWidget';
-export { default as ObjectBrowserWidget } from '@plone/volto/components/manage/Widgets/ObjectBrowserWidget';
-export { default as ObjectBrowserWidgetMode } from '@plone/volto/components/manage/Widgets/ObjectBrowserWidget';
-export { default as ObjectWidget } from '@plone/volto/components/manage/Widgets/ObjectWidget';
-export { default as ObjectListWidget } from '@plone/volto/components/manage/Widgets/ObjectListWidget';
-
 export { default as EditDefaultBlock } from '@plone/volto/components/manage/Blocks/Block/DefaultEdit';
 export { default as EditDescriptionBlock } from '@plone/volto/components/manage/Blocks/Description/Edit';
 export { default as EditTitleBlock } from '@plone/volto/components/manage/Blocks/Title/Edit';