> Painless Code Splitting Component
npm install react-code-split-component
Split bundle codes and load module and dependencies on demand. Time to say goodbye to monolithic bundle file! 👋
__TL;DR__
Code splitting allows us to split your code into various bundles (chunks) which we can then load on demand.
Code splitting helps us to only load codes and its specific dependencies when we're using routing or running several codes based on user events. Just load the specific page's dependencies asynchronously. __It helps you have a nice time to first paint when you're building PWApps!__
For more information regarding code splitting, which is a term popularized by Webpack, visit Webpack 2 documentation on Code Splitting.
npm install --save react-code-split-component
yarn
yarn add react-code-split-component
Usage 🔧
There are currently two supported code splitting strategy, the first one being using higher order component and send a load() props containing a import to a component.The second one is to wrap the component to be lazy loaded using
lazify() HOC Wrapper method.Below are the provided usages of each strategy:
$3
#### Importing Components
__Usual ES6 Component Import__
`javascript
import MyAwesomeComponent from './path/to/MyAwesomeComponent';export default () => (
...
);
`__Using React Code Split Component with ES6 import__
javascript
import { LazyComponent } from 'react-code-split-component';export default () => (
...
import('./path/to/MyAwesomeComponent')} />
);
`#### Sending Props to Code Splitting Component
supports props sending to a component to be lazily loaded.`javascript
import { LazyComponent } from 'react-code-split-component';export default () => (
...
myPropsNameOne={...}
myPropsNameTwo={...}
/>
);
`$3
lazify(componentImportPromise, [extraProps])
#### Without Props
javascript
import React from 'react';
import { lazify } from 'react-code-split-component';export default () => (
...
{ lazify(import('./path/to/MyAwesomeComponent')) }
);
`#### With Extra Props
javascript
import React from 'react';
import { lazify } from 'react-code-split-component';export default () => (
...
{ lazify(import('./path/to/MyAwesomeComponent'), { myExtraPropKey: 'hi!'}) }
);
`ESLint Issues ⚠️
ESLint might shows warning when you're using import inside another react component if you use since it normally expect you to put every import` statement on top of your file.not yet supported
Dynamic Import is currently in TC39 Proposal. When dynamic imports is officially supported, this repo will get updated to take advantage of the awesomeness of dynamic imports.
Server Side Rendering currently not supported
I Came up with this component since I've been manually code-splitting components and put them into lazy loaded components. Doing these things can quickly become painful and cumbersome, so a dedicated component will helps a lot. Please give feedback or let me know if you find some issues. Will be glad to hear some stories on how code-splitting helps you reduce initial bundle size and improve your app's first meaningful paint.