Install

npm install react-dynamic-loadable --save

Simple Example

importloadablefrom'react-dynamic-loadable';importLoadingfrom'./my-loading-component';// Add Loading component.loadable.setDefaultLoadingComponent(<div>Loading</div>);constLoadableComponent=loadable({component:()=>import('./my-component'),// LoadingComponent: () => Loading,});exportdefaultclassAppextendsReact.Component{render(){return<LoadableComponent/>;}}

Example

importReactfrom'react';import{model}from'@rematch/core';importloadablefrom'react-dynamic-loadable';constdynamicWrapper=(models,component)=>loadable({models:()=>models.map((m)=>{returnimport(`./models/${m}.js`).then((md)=>{model({name:m, ...md[m]||md.default});});}),  component,LoadingComponent:()=><span>loading....</span>,});exportconstgetRouterData=()=>{constconf={'/':{component:dynamicWrapper(['user'],()=>import('./layouts/BasicLayout')),},'/home':{component:dynamicWrapper([],()=>import('./routes/Home')),},'/login':{component:dynamicWrapper(['user'],()=>import('./routes/Login')),},};returnconf;};

Server-Side Rendering

// webpack.config.jsimport{DynamicLoadablePlugin}from'react-dynamic-loadable/DynamicLoadablePlugin';exportdefault{plugins:[newDynamicLoadablePlugin({filename:'./dist/loadable-assets.json',exclude:/.(js|css)$/}),],};

import{getBundles}from'react-dynamic-loadable/DynamicLoadablePlugin';letbundles=getBundles(stats,modules);