Skip to content

A react component for loading async component, with webpack chunk.

License

Notifications You must be signed in to change notification settings

EvanLiu2968/react-dynamic-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-dynamic-loader

Packagistnpmcontinuousphp

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

  1. 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

About

A react component for loading async component, with webpack chunk.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published