react#lazy JavaScript Examples

routes = [
  {
    path: 'dashboard',
    component: lazy(() => import('features/Dashboard')),
    exact: true,
  },
  {
    path: 'users',
    component: lazy(() => import('features/Users')),
    exact: true,
  },
]

loadable = (importFunc, { fallback = null } = { fallback: null }) => {
  const LazyComponent = lazy(importFunc);

  return props => (
    <Suspense fallback={fallback}>
      <LazyComponent {...props} />
    </Suspense>
  );
}

configureStore = (initialState, history) => {
  const middlewares = [thunk, routerMiddleware(history)];
  const storeEnhancers = [];

  const isDev = process.env.NODE_ENV !== 'production';
  if (isDev) {
    // allow devs to use their own plugged in browser redux dev tool instead of the builtin component
    const devTools = DevTools();
    const devToolsEnhancer = window.__REDUX_DEVTOOLS_EXTENSION__
      ? window.__REDUX_DEVTOOLS_EXTENSION__()
      : devTools.instrument();
    storeEnhancers.push(devToolsEnhancer);
  }

  const middlewareEnhancer = applyMiddleware(...middlewares);
  storeEnhancers.unshift(middlewareEnhancer);

  const store = createStore(
    rootReducer(history),
    initialState,
    compose(...storeEnhancers)
  );

  if (isDev && module.hot && module.hot.accept) {
    module.hot.accept('../reducers', () => {
      const nextRootReducer = lazy(() => import('../reducers'));
      store.replaceReducer(nextRootReducer);
    });
  }
  return store;
}

ImageInformationCard = lazy(() => import('./ImageInformationCard'))

Header = lazy(() =>
  import('./components/Header' /* webpackChunkName: "header" */)
)

Header = lazy(() => import('./components/Header' /* webpackChunkName: "components" */))

ReduxApp = lazy(() => import('./ReduxApp' /* webpackChunkName: "components" */))

ReduxApp = lazy(() => import('./ReduxApp' /* webpackChunkName: "components" */))

Landing = lazy(() => import("./components/Landing"))

AccessRequestsPage = lazy(() => import('./Routes/AccessRequestsPage'))

List = lazy(() => import(/* webpackChunkName: "List" */ './SmartComponents/Recs/List'))

HomePage = lazy(() =>
  import(/* webpackChunkName: "HomePage" */ './Routes/HomePage')
)

GeneralInformation = lazy(() =>
  import(
    '@redhat-cloud-services/frontend-components-inventory-general-info/GeneralInformation'
  )
)

Email = lazy(() =>
  import(
    /* webpackChunkName: "Email" */ './PresentationalComponents/Email/Email'
  )
)

Export = lazy(() => import('./Export'))

NotFoundPage = lazy(() =>
  import('../../pages/NotFoundPage/NotFoundPage')
)

Notification = lazy(() =>
  import(
    /* webpackChunkName: "Notification" */ './PresentationalComponents/Notification/Notification'
  )
)

RecsListTable = lazy(() =>
  import(/* webpackChunkName: 'RulesTable' */ '../RecsListTable/')
)

List = lazy(() => import(/* webpackChunkName: 'Signature List' */ './Signatures'))

AboutRemoteHostConfigPopover = lazy(() =>
  import(
    /* webpackChunkName: "ConnectSysAboutRemoteHostConfigPopovertemsModal" */ '../../Components/AboutRemoteHostConfigPopover/AboutRemoteHostConfigPopover'
  )
)

CompletedTaskDetails = lazy(() =>
  import(
    /* webpackChunkName: "CompletedTaskDetails" */ './SmartComponents/CompletedTaskDetails/CompletedTaskDetails'
  )
)

ActivationKeys = lazy(() => import('./Components/ActivationKeys'))

RecsList = lazy(() =>
  import(/* webpackChunkName: "RecsList" */ './Components/RecsList')
)