REACT LOADABLE DYNAMIC
🤔 Why use dynamic
It includes functions like split chunks
, async chunks loader
, loading state maintainance
, so developers is free from those technical details and is able to focus their business.
Usually work with dynamic import syntax.
📦 Install
$ npm install --save react-loadable-dynamic
# or
$ yarn add react-loadable-dynamic
🔨 Usage
Create dynamic component
import dynamic from 'react-loadable-dynamic';
export default dynamic({
loader: async function () {
// webpackChunkName tells webpack create separate bundle for HugeA
const { default: HugeA } = await import(/* webpackChunkName: "external_A" */ './HugeA');
return HugeA;
},
});
Use dynamic component
import React from 'react';
import AsyncHugeA from './AsyncHugeA';
// import as normal component
// with below benefits out of box:
// 1. download bundle automatically
// 2. give a loading splash while downloading (customizable)
// 3. display HugeA whenever component downloaded
export default () => {
return <AsyncHugeA />;
};
💻 Online Demo
🤝 Contributing
$ git clone git@github.com:kangyana/react-loadable-dynamic.git
$ cd hooks