React Code Split Component

Painless Code Splitting Component

Split bundle codes and load module and dependencies on demand. Time to say goodbye to monolithic bundle file! 👋

Motivation 💪

Code Splitting?__

TL;DR Code splitting allows us to split your code into various bundles (chunks) which we can then load on demand.

Where we need them?

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.

Installation 👷

NPM

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 <LazyComponent /> 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:

LazyComponent

Importing Components

Usual ES6 Component Import

import MyAwesomeComponent from './path/to/MyAwesomeComponent';

export default () => (
  <div>
    ...
    <MyAwesomeComponent />
  </div>
);

Using React Code Split Component with ES6 import

import { LazyComponent } from 'react-code-split-component';

export default () => (
  <div>
    ...
    <LazyComponent load={() => import('./path/to/MyAwesomeComponent')} />
  </div>
);

Sending Props to Code Splitting Component

<LazyComponent /> supports props sending to a component to be lazily loaded.

import { LazyComponent } from 'react-code-split-component';

export default () => (
  <div>
    ...
    <LazyComponent
      load={() => import('./path/to/MyAwesomeComponent')}
      myPropsNameOne={...}
      myPropsNameTwo={...}
    />
  </div>
);

Wrap Component imports with lazify method

lazify(componentImportPromise, [extraProps])

Without Props

import React from 'react';
import { lazify } from 'react-code-split-component';

export default () => (
  <div>
    ...
    { lazify(import('./path/to/MyAwesomeComponent')) }
  </div>
);

With Extra Props

import React from 'react';
import { lazify } from 'react-code-split-component';

export default () => (
  <div>
    ...
    { lazify(import('./path/to/MyAwesomeComponent'), { myExtraPropKey: 'hi!'}) }
  </div>
);

ESLint Issues ⚠️

ESLint might shows warning when you're using import inside another react component if you use <LazyComponent /> since it normally expect you to put every import statement on top of your file.

EcmaScript Dynamic Import 🎵

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.

SSR Support 🔬

Server Side Rendering currently not supported

Side Note ✨

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.