react-dynamic-loader
Dynamic async load component for react with webpack chunk
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
const Home = ;/* webpack build chunk fileschunk - [my-chunk-name].[hash].js */
Add loading and error state
const Home = ;
With require usage
const Home = ;/* webpack build chunk fileschunk - [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
require.ensure
const Component = ;
Demo is With require usage
syntax dynamic import
import()
return the Promise object, callback the value of export
const loader = import'./component'loader
the method require support with babel-plugin-syntax-dynamic-import
.babelrc
configure demo