Optimize produced bundles for Anonymous users

There are some opportunities to further shrink the generated bundle with the techniques described here: https://webpack.js.org/guides/lazy-loading/

We’ve been using this technique for a custom implementation that uses ckeditor:

  componentDidMount() {
    import(/* webpackChunkName: 'ckeditor' */ '@ckeditor/ckeditor5-react').then(
      module => this.setState({ CKEditor: module.default }),
    );
    import(
      /* webpackChunkName: 'classiCk' */ '@ckeditor/ckeditor5-build-classic'
    ).then(module => this.setState({ ClassicEditor: module.default }));
  }

And then in component rendering we use this.state.ClassicEditor and such to render the CKEditor component. This causes Webpack to split those resources in a separate chunk that’s loaded on demand when the parent components is first mounted.

As the bigger candidates in Volto’s case, I see the draftjs editor (which will also include immutable.js) and the DND support, I think it’s react-dnd.

[pnicolli]

@tiberiuichim the chunks are loaded on-demand with loadable-components. It is based on the same dynamic imports you suggested above.

[sneridagh]

After #1365