Lazy loading#
Since Volto 5.0.0 you are able to do splitting and lazy loading safely any app component
using @loadable/component
library. You can also benefit from it in your own project by
using it.
Note
Webpack 4 is already lazy load enabled, using import()
but @loadable/component makes the process safe since Volto is using Server Side Rendering. The React community is working actively in the React async mode popularly known as Suspense. Suspense will be SSR safe but in the meanwhile it's not ready, @loadable/component
is the community accepted replacement.
Lazy load a component#
export const DatetimeWidget = loadable(() =>
import('@plone/volto/components/manage/Widgets/DatetimeWidget'),
);
Then use DatetimeWidget
as you'll do normally using a standard import
statement.
Tip
You can find the complete @loadable/component
documentation here: https://loadable-components.com
Code splitting bundle analyzer#
You can check the code splitting state by using the included bundle analyzer:
$ yarn analyze
A browser will open with the bundle inspector.