Skip to content
A higher order component for loading components with dynamic imports.
Branch: master
Clone or download
Latest commit ff85bb9 Dec 11, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Update example. Nov 30, 2018
src
.babelrc Update babel config. Nov 29, 2018
.eslintrc.js Add files. Mar 29, 2018
.gitignore Add files. Mar 29, 2018
.npmignore
DynamicLoadablePlugin.js Add param the exclude some data. Nov 29, 2018
README.md Refactor dynamic loadable. Nov 30, 2018
package-lock.json released v1.0.10 Nov 29, 2018
package.json Build v1.1.2 Dec 11, 2018

README.md

react-dynamic-loadable

A higher order component for loading components with dynamic imports.

Install

npm install react-dynamic-loadable --save

Simple Example

Simple Example code

import loadable from 'react-dynamic-loadable';
import Loading from './my-loading-component';

// Add Loading component.
loadable.setDefaultLoadingComponent(<div>Loading</div>);

const LoadableComponent = loadable({
  component: () => import('./my-component'),
  // LoadingComponent: () => Loading,
});

export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}

Example

Use Redux (@rematch), React Router Example.

Example code

import React from 'react';
import { model } from '@rematch/core';
import loadable from 'react-dynamic-loadable';

const dynamicWrapper = (models, component) => loadable({
  models: () => models.map((m) => {
    return import(`./models/${m}.js`).then((md) => {
      model({ name: m, ...md[m] || md.default });
    });
  }),
  component,
  LoadingComponent: () => <span>loading....</span>,
});

export const getRouterData = () => {
  const conf = {
    '/': {
      component: dynamicWrapper(['user'], () => import('./layouts/BasicLayout')),
    },
    '/home': {
      component: dynamicWrapper([], () => import('./routes/Home')),
    },
    '/login': {
      component: dynamicWrapper(['user'], () => import('./routes/Login')),
    },
  };
  return conf;
};

Server-Side Rendering

// webpack.config.js
import { DynamicLoadablePlugin } from 'react-dynamic-loadable/DynamicLoadablePlugin';
 
export default {
  plugins: [
    new DynamicLoadablePlugin({
      filename: './dist/loadable-assets.json',
      exclude: /.(js|css)$/
    }),
  ],
};
import { getBundles } from 'react-dynamic-loadable/DynamicLoadablePlugin';
let bundles = getBundles(stats, modules);
You can’t perform that action at this time.