react-dynamic-loader

Dynamic async load component for react with webpack chunk

Install

npm install react-dynamic-loader --save

import dynamicLoader from 'react-dynamic-loader'
// or
var dynamicLoader = require('react-dynamic-loader')

Options

Option	Type	Default	Description
loader	Function	null	return Promise object
loading	Boolean or JSX	<div className="async-loading">loading...</div>	the JSX instead when component is loading
error	Boolean or JSX	<div className="async-error">some error occurred.</div>	the JSX instead when error occurred
delay	Number	200	time of the component delay to instead when it's loaded

Usage

Basic usage

import dynamicLoader from 'react-dynamic-loader'
const Home = dynamicLoader({
  loader: () => import(/* webpackChunkName: "my-chunk-name" */"../pages/home")
});
/* webpack build chunk files
chunk
  - [my-chunk-name].[hash].js
 */

Add loading and error state

import dynamicLoader from 'react-dynamic-loader'
import { Spin } from 'antd'
const Home = dynamicLoader({
  loader: () => import(/* webpackChunkName: "my-chunk-name" */"../pages/home"),
  loading: <div className="async-loading"><Spin size="large" /></div>,
  error: <div className="async-error">some error occurred.</div>,
  delay: 300
});

With require usage

import dynamicLoader from 'react-dynamic-loader'
const Home = AsyncLoader({
  loader: () => new Promise((resolve,reject)=>{
    require.ensure([], require => {
      resolve(require("../pages/home"));
    }, "my-chunk-name");
  })
});
/* webpack build chunk files
chunk
  - [my-chunk-name].[hash].js
 */

Demo

https://www.evanliu2968.com.cn

Introduction

react-router v4 remove the default asyncLoader getComponent of v3, so we can do it ourself.

The main methods of async load files with webpack are as follows

1. require.ensure

const Component = getComponent((callback) => {
  require.ensure([], require => {
    callback(null, require("./component").default);
  }, 'chunk-name');
});

Demo is With require usage

2. syntax dynamic import

import() return the Promise object, callback the value of export

const loader = import('./component')
loader.then((e)=>{
  let Component = e.default
})

the method require support with babel-plugin-syntax-dynamic-import

.babelrc configure demo

{
  "plugins": [
     "syntax-dynamic-import",
  ]
}

License

MIT