Lazy loading components

CHANGELOG.md

@@ -26,6 +26,7 @@
 - Remove Docker build from tests @sneridagh
 - Removed Enzyme @pnicolli
 - Added testing-library (react and cypress) @pnicolli
+- Added lazy loading for routes, toolbar and other components @pnicolli
 
 ## 4.0.0-alpha.9 (2019-10-09)
 

babel.js

@@ -33,6 +33,7 @@ module.exports = function(api) {
         messagesDir: './build/messages/',
       },
     ],
+    '@loadable/babel-plugin',
   ];
 
   return {

package.json

@@ -168,6 +168,10 @@
     "@babel/plugin-proposal-throw-expressions": "7.2.0",
     "@babel/plugin-syntax-import-meta": "7.2.0",
     "@babel/preset-stage-0": "7.0.0",
+    "@loadable/babel-plugin": "5.10.3",
+    "@loadable/component": "5.10.3",
+    "@loadable/server": "5.10.3",
+    "@loadable/webpack-plugin": "5.7.1",
     "@testing-library/cypress": "5.0.2",
     "@testing-library/jest-dom": "4.2.0",
     "@testing-library/react": "9.3.0",
@@ -285,6 +289,5 @@
     "svgo-loader": "2.1.0",
     "tlds": "1.203.1",
     "xmlrpc": "1.3.2"
-  },
-  "devDependencies": {}
+  }
 }

razzle.config.js

@@ -9,6 +9,7 @@ const autoprefixer = require('autoprefixer');
 const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
 const nodeExternals = require('webpack-node-externals');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const LoadablePlugin = require('@loadable/webpack-plugin');
 const fs = require('fs');
 const { map } = require('lodash');
 const glob = require('glob').sync;
@@ -125,6 +126,25 @@ module.exports = {
           __SERVER__: false,
         }),
       );
+
+      config.plugins.push(
+        new LoadablePlugin({
+          outputAsset: false,
+          writeToDisk: { filename: path.resolve(__dirname, 'build') },
+        }),
+      );
+
+      config.output.filename = dev
+        ? 'static/js/[name].js'
+        : 'static/js/[name].[chunkhash:8].js';
+
+      config.optimization = Object.assign({}, config.optimization, {
+        runtimeChunk: true,
+        splitChunks: {
+          chunks: 'all',
+          name: dev,
+        },
+      });
     }
 
     if (target === 'node') {

src/components/index.js

@@ -5,65 +5,65 @@
  */
 export Anontools from '@plone/volto/components/theme/Anontools/Anontools';
 export Breadcrumbs from '@plone/volto/components/theme/Breadcrumbs/Breadcrumbs';
-export ContactForm from '@plone/volto/components/theme/ContactForm/ContactForm';
+// export ContactForm from '@plone/volto/components/theme/ContactForm/ContactForm';
 export Footer from '@plone/volto/components/theme/Footer/Footer';
 export Header from '@plone/volto/components/theme/Header/Header';
 export Icon from '@plone/volto/components/theme/Icon/Icon';
 export Logo from '@plone/volto/components/theme/Logo/Logo';
 export Navigation from '@plone/volto/components/theme/Navigation/Navigation';
 export SearchWidget from '@plone/volto/components/theme/SearchWidget/SearchWidget';
 export Title from '@plone/volto/components/theme/Title/Title';
-export App from '@plone/volto/components/theme/App/App';
+// export App from '@plone/volto/components/theme/App/App';
 export DefaultView from '@plone/volto/components/theme/View/DefaultView';
 export FileView from '@plone/volto/components/theme/View/FileView';
 export ImageView from '@plone/volto/components/theme/View/ImageView';
 export NewsItemView from '@plone/volto/components/theme/View/NewsItemView';
 export ListingView from '@plone/volto/components/theme/View/ListingView';
-export Login from '@plone/volto/components/theme/Login/Login';
-export Logout from '@plone/volto/components/theme/Logout/Logout';
-export NotFound from '@plone/volto/components/theme/NotFound/NotFound';
+// export Login from '@plone/volto/components/theme/Login/Login';
+// export Logout from '@plone/volto/components/theme/Logout/Logout';
+// export NotFound from '@plone/volto/components/theme/NotFound/NotFound';
 export Pagination from '@plone/volto/components/theme/Pagination/Pagination';
 export SummaryView from '@plone/volto/components/theme/View/SummaryView';
-export Search from '@plone/volto/components/theme/Search/Search';
+// export Search from '@plone/volto/components/theme/Search/Search';
 export SearchTags from '@plone/volto/components/theme/Search/SearchTags';
 export TabularView from '@plone/volto/components/theme/View/TabularView';
-export View from '@plone/volto/components/theme/View/View';
+// export View from '@plone/volto/components/theme/View/View';
 export Comments from '@plone/volto/components/theme/Comments/Comments';
 export CommentEditModal from '@plone/volto/components/theme/Comments/CommentEditModal';
 export SocialSharing from '@plone/volto/components/theme/SocialSharing/SocialSharing';
 export Tags from '@plone/volto/components/theme/Tags/Tags';
-export Register from '@plone/volto/components/theme/Register/Register';
-export PasswordReset from '@plone/volto/components/theme/PasswordReset/PasswordReset';
-export RequestPasswordReset from '@plone/volto/components/theme/PasswordReset/RequestPasswordReset';
+// export Register from '@plone/volto/components/theme/Register/Register';
+// export PasswordReset from '@plone/volto/components/theme/PasswordReset/PasswordReset';
+// export RequestPasswordReset from '@plone/volto/components/theme/PasswordReset/RequestPasswordReset';
 
 export Actions from '@plone/volto/components/manage/Actions/Actions';
-export Add from '@plone/volto/components/manage/Add/Add';
-export Contents from '@plone/volto/components/manage/Contents/Contents';
+// export Add from '@plone/volto/components/manage/Add/Add';
+// export Contents from '@plone/volto/components/manage/Contents/Contents';
 export ContentsIndexHeader from '@plone/volto/components/manage/Contents/ContentsIndexHeader';
 export ContentsItem from '@plone/volto/components/manage/Contents/ContentsItem';
 export ContentsUploadModal from '@plone/volto/components/manage/Contents/ContentsUploadModal';
 export ContentsPropertiesModal from '@plone/volto/components/manage/Contents/ContentsPropertiesModal';
 export ContentsRenameModal from '@plone/volto/components/manage/Contents/ContentsRenameModal';
 export ContentsWorkflowModal from '@plone/volto/components/manage/Contents/ContentsWorkflowModal';
 export ContentsTagsModal from '@plone/volto/components/manage/Contents/ContentsTagsModal';
-export Controlpanel from '@plone/volto/components/manage/Controlpanels/Controlpanel';
-export Controlpanels from '@plone/volto/components/manage/Controlpanels/Controlpanels';
-export ModerateComments from '@plone/volto/components/manage/Controlpanels/ModerateComments';
-export UsersControlpanel from '@plone/volto/components/manage/Controlpanels/UsersControlpanel';
+// export Controlpanel from '@plone/volto/components/manage/Controlpanels/Controlpanel';
+// export Controlpanels from '@plone/volto/components/manage/Controlpanels/Controlpanels';
+// export ModerateComments from '@plone/volto/components/manage/Controlpanels/ModerateComments';
+// export UsersControlpanel from '@plone/volto/components/manage/Controlpanels/UsersControlpanel';
 export UsersControlpanelGroups from '@plone/volto/components/manage/Controlpanels/UsersControlpanelGroups';
 export VersionOverview from '@plone/volto/components/manage/Controlpanels/VersionOverview';
-export Delete from '@plone/volto/components/manage/Delete/Delete';
+// export Delete from '@plone/volto/components/manage/Delete/Delete';
 export UsersControlpanelUser from '@plone/volto/components/manage/Controlpanels/UsersControlpanelUser';
-export Diff from '@plone/volto/components/manage/Diff/Diff';
+// export Diff from '@plone/volto/components/manage/Diff/Diff';
 export DiffField from '@plone/volto/components/manage/Diff/DiffField';
 export Display from '@plone/volto/components/manage/Display/Display';
-export Edit from '@plone/volto/components/manage/Edit/Edit';
+// export Edit from '@plone/volto/components/manage/Edit/Edit';
 export Form from '@plone/volto/components/manage/Form/Form';
 export Field from '@plone/volto/components/manage/Form/Field';
-export ModalForm from '@plone/volto/components/manage/Form/ModalForm';
-export History from '@plone/volto/components/manage/History/History';
+// export ModalForm from '@plone/volto/components/manage/Form/ModalForm';
+// export History from '@plone/volto/components/manage/History/History';
 export Messages from '@plone/volto/components/manage/Messages/Messages';
-export ChangePassword from '@plone/volto/components/manage/Preferences/ChangePassword';
+// export ChangePassword from '@plone/volto/components/manage/Preferences/ChangePassword';
 export PersonalPreferences from '@plone/volto/components/manage/Preferences/PersonalPreferences';
 export PersonalInformation from '@plone/volto/components/manage/Preferences/PersonalInformation';
 export ArrayWidget from '@plone/volto/components/manage/Widgets/ArrayWidget';
@@ -78,10 +78,10 @@ export SelectWidget from '@plone/volto/components/manage/Widgets/SelectWidget';
 export SidebarTextWidget from '@plone/volto/components/manage/Widgets/SidebarTextWidget';
 export Sidebar from '@plone/volto/components/manage/Sidebar/Sidebar';
 export SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
-export Sharing from '@plone/volto/components/manage/Sharing/Sharing';
+// export Sharing from '@plone/volto/components/manage/Sharing/Sharing';
 export TextareaWidget from '@plone/volto/components/manage/Widgets/TextareaWidget';
 export TextWidget from '@plone/volto/components/manage/Widgets/TextWidget';
-export Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
+// export Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
 export WysiwygWidget from '@plone/volto/components/manage/Widgets/WysiwygWidget';
 export Workflow from '@plone/volto/components/manage/Workflow/Workflow';
 
@@ -111,4 +111,4 @@ export ImageSidebar from '@plone/volto/components/manage/Sidebar/ImageSidebar';
 export PersonalTools from '@plone/volto/components/manage/Toolbar/PersonalTools';
 export More from '@plone/volto/components/manage/Toolbar/More';
 export Types from '@plone/volto/components/manage/Toolbar/Types';
-export Toast from '@plone/volto/components/manage/Toast/Toast';
+// export Toast from '@plone/volto/components/manage/Toast/Toast';

src/components/manage/Actions/Actions.jsx

@@ -11,10 +11,16 @@ import { Link } from 'react-router-dom';
 import { Dropdown, Icon } from 'semantic-ui-react';
 import { toast } from 'react-toastify';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import loadable from '@loadable/component';
 
 import { cut, copy, copyContent, moveContent } from '../../../actions';
 import { getBaseUrl } from '../../../helpers';
-import { ContentsRenameModal, Toast } from '../../../components';
+// import { ContentsRenameModal, Toast } from '../../../components';
+
+const ContentsRenameModal = loadable(() =>
+  import('../Contents/ContentsRenameModal'),
+);
+const Toast = loadable(() => import('../Toast/Toast'));
 
 const messages = defineMessages({
   cut: {

src/components/manage/Actions/Actions.test.jsx

@@ -1,8 +1,9 @@
+import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
-import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
+import { render, wait } from '@testing-library/react';
 
 import Actions from './Actions';
 
@@ -13,7 +14,7 @@ jest.mock('../Contents/ContentsRenameModal', () =>
 );
 
 describe('Actions', () => {
-  it('renders an actions component', () => {
+  it('renders an actions component', async () => {
     const store = mockStore({
       actions: {
         actions: {
@@ -121,14 +122,15 @@ describe('Actions', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Actions pathname="/test" />
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    await wait(() => {
+      expect(container.firstChild).toMatchSnapshot();
+    });
   });
 });

src/components/manage/Actions/__snapshots__/Actions.test.jsx.snap

@@ -2,91 +2,81 @@
 
 exports[`Actions renders an actions component 1`] = `
 <div
-  aria-expanded={false}
-  className="ui item dropdown"
+  aria-expanded="false"
+  class="ui item dropdown"
   id="toolbar-actions"
-  onBlur={[Function]}
-  onChange={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onMouseDown={[Function]}
   role="listbox"
-  tabIndex={0}
+  tabindex="0"
 >
   <span>
     <i
       aria-hidden="true"
-      className="lightning big icon"
+      class="lightning big icon"
     />
 
     Actions
   </span>
   <i
     aria-hidden="true"
-    className="dropdown icon"
-    onClick={[Function]}
+    class="dropdown icon"
   />
   <div
-    className="menu transition"
+    class="menu transition"
   >
     <div
-      className="item"
-      onClick={[Function]}
+      class="item"
       role="option"
     >
       <i
         aria-hidden="true"
-        className="cut icon"
+        class="cut icon"
       />
       <span
-        className="text"
+        class="text"
       >
         Cut
       </span>
     </div>
     <div
-      className="item"
-      onClick={[Function]}
+      class="item"
       role="option"
     >
       <i
         aria-hidden="true"
-        className="copy icon"
+        class="copy icon"
       />
       <span
-        className="text"
+        class="text"
       >
         Copy
       </span>
     </div>
     <a
-      className="item"
+      class="item"
       href="/test/delete"
-      onClick={[Function]}
     >
       <i
         aria-hidden="true"
-        className="trash icon"
+        class="trash icon"
       />
       Delete
     </a>
     <div
-      className="item"
-      onClick={[Function]}
+      class="item"
       role="option"
     >
       <i
         aria-hidden="true"
-        className="text cursor icon"
+        class="text cursor icon"
       />
       <span
-        className="text"
+        class="text"
       >
         Rename
       </span>
     </div>
     <div
-      className="RenameModal"
+      class="RenameModal"
     />
   </div>
 </div>

src/components/manage/Add/Add.jsx

@@ -14,10 +14,11 @@ import { Portal } from 'react-portal';
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import qs from 'query-string';
+import loadable from '@loadable/component';
 import { settings } from '~/config';
 
 import { createContent, getSchema } from '../../../actions';
-import { Form, Icon, Toolbar, Sidebar } from '../../../components';
+import { Form, Icon /*, Toolbar */, Sidebar } from '../../../components';
 import {
   getBaseUrl,
   hasTilesData,
@@ -28,6 +29,8 @@ import {
 import saveSVG from '../../../icons/save.svg';
 import clearSVG from '../../../icons/clear.svg';
 
+const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+
 const messages = defineMessages({
   add: {
     id: 'Add {type}',

src/components/manage/Contents/Contents.jsx

@@ -57,14 +57,18 @@ import {
   ContentsTagsModal,
   ContentsPropertiesModal,
   Pagination,
-  Toolbar,
-  Toast,
+  // Toolbar,
+  // Toast,
   Icon as IconNext,
 } from '../../../components';
 import { toast } from 'react-toastify';
+import loadable from '@loadable/component';
 
 import backSVG from '../../../icons/back.svg';
 
+const Toast = loadable(() => import('../Toast/Toast'));
+const Toolbar = loadable(() => import('../Toolbar/Toolbar'));
+
 const defaultIndexes = ['ModificationDate', 'EffectiveDate', 'review_state'];
 const messages = defineMessages({
   back: {

src/components/manage/Contents/ContentsPropertiesModal.jsx

@@ -9,9 +9,12 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { isEmpty, map } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
+import loadable from '@loadable/component';
 
 import { updateContent } from '../../../actions';
-import { ModalForm } from '../../../components';
+// import { ModalForm } from '../../../components';
+
+const ModalForm = loadable(() => import('../Form/ModalForm'));
 
 const messages = defineMessages({
   properties: {