React Lazy Imports helper

Abstract

This tiny library made to support System.import and require.insure operations in ReactJS based applications with Webpack bundler involved.

For now, it supports the following cases:

• While the application is initially loaded.
• While some route has to get a separate bundle and be loaded on demand.
• While some route has to get a separate bundle and be loaded "behind the scene".

Installation

npm i -S react-lazy-imports

Examples

• Splash screen index.jsx

// All of the imported above here will be included in the main,
// initially loading, bundle. Other parts will be moved
// out to a lazy-loading, dynamic bundle.
import React from 'react';
import { render } from 'react-dom';
 
import { LazyCall } from 'react-lazy-imports';
 
// The only custom layout which acts as a "splash-screen"
// till the whole application loaded. It's a good idea to make
// it as simple as possible.
import Splash from './pages/InitialLayout.page'
 
LazyCall(System.import('./app'))
 
render(
    <Splash/>,
    document.getElementById('root')
)

• Dinamic routing routes.jsx

import React from 'react';
import { Router, Redirect } from 'react-router';
import { browserHistory } from 'react-router';

import { LazyRoute, RouteOnDemand } from 'react-lazy-imports';

import App from './App';

const routes = {
  component: App,
  childRoutes: [
    {
      path: '/',

      // This route will be loaded only if it'll be required.
      getComponent: RouteOnDemand(System.import('./Home'))
    },
    {
      path: 'about',

      // This route will be loaded just after the initial 
      // part of the application, "behinde the scene".
      getComponent: LazyRoute(System.import('./About'))
    },
    {
      path: '*',
      onEnter: (nextState, replaceState) => replaceState(
        { nextPathname: nextState.location.pathname }, 
        '/'
      )
    }
  ]
};

export default () => <Router history={browserHistory} routes={routes} />;