There are different ways to do it based on the transpiler you use. With Webpack and dynamic imports, you could create a custom loader around the promises returned by the Webpack generation.

For React, you can use React Loadable (https://github.com/jamiebuilds/react-loadable) that provides a Higher Order Component and Server Side rendering.

Pretty much trivial to implement in react.

    class Loader extends React.Component {
      state = {
        Component: null
      };
    
      componentWillMount() {
        import('./Component').then(Component => {
          this.setState({ Component });
        });
      }

      render() {
        const { Component } = this.state;
        if (!Component) {
          return <div>Loading...</div>;
        } else {
          return <Component/>;
        };
      }
    }

Might want to add a few lines of error handling for production use, but that is pretty much all you need.

Like the article (presentation) said it's not the best idea to do this with hundreds of components (I think he mentions latency) - in fact you "somehow" have to (should?) bundle things together and then you are back to square one or at least have to hink about pluggability/configuration again.

Obviously you don't want to use it for every component, you put it in key places where you want lazy loading to happen.

It isn't well documented yet but this is possible in Angular (2+). Here's a good tutorial from someone who figured it out.

https://blog.angularindepth.com/dynamically-loading-componen...

My company's framework lazy loads every component automatically by default (you can override this behavior to batches as well).

Vue.js does https://vuejs.org/v2/guide/components-dynamic-async.html