async-bundle

Code splitting for React, Redux and Redux-Saga. Based on React Router 4 and React Boilerplate.

async-bundle helps you scale your application and improve load time by providing an easy way to split your code into various bundles, which can then be loaded in on demand. Giving you complete flexibility in the way that you load in your async modules. Not just with regards to the import tools you can use, but also how you structure your code within your application.

Features

Code Splitting - Easily split your application into dynamically loaded chunks, using either ES6 Imports or Webpack's Bundle Loader

Inject asynchronously loaded reducers - Split your store's state into easily maintainable chunks, loading only what you need for each route.

Inject asynchronously loaded redux-sagas - Dynamically load your saga's as and when you need them

Getting started

Install

$ npm install async-bundle --save

or

$ yarn add async-bundle

Parameters

async-bundle load prop accepts:

• comp - view component import using specified async imports
• reducer - redux reducer
• sagas - array of generators

Array:

/**
 * load property as array (order must be as specified)
 */
<Bundle load={[
    yourImportedComponent,
    reducer,
    sagas
]}

Object:

/**
 * load property as object passing in correctly names keys
 */
<Bundle load={{
    comp,
    reducer,
    sagas
}}

Usage Example

async-bundle provides several ways to split up your code and asynchronously load in your modules. The easiest way is by passing your imports to the load prop of the bundle.

Once the Bundle resolves your imported component it updates the state internally and renders the component.

You can use either the component or render props of React's Route component. Please refer to the React Router docs for further information.

import React from 'react';
import Home from 'bundle-loader?lazy!./Home';
import { AsyncRoute, AsyncBundle } from 'async-bundle';
import { Route } from 'react-router-dom';

// Initialise your Bundle
const Bundle = AsyncBundle();
// Initialise your Bundle using AsyncRoute, a higher order component for AsyncBundle
const RouteBundle = AsyncRoute();

class App extends React.Component {
    // Component code
    render() {
        return (
            <div>
                <h1>Welcome!</h1>
                // load component using bundle-loader
                <Route path="/" component={() => <Bundle load={[Home]} />} />
                // load component using babel-import
                <Route path="/dashboard" component={() => <Bundle load={[import('./Dashboard')]} />} />
                // load component using bundle-loader
                // pass in RouteBundle directly without having to define a function
                <Route path="/about" component={RouteBundle({comp: import('./about')})} />
            </div>
        )
    }
}

Documentation

• AsyncBundle
• AsyncRoute
• Splitting Reducers
• Splitting Sagas
• Running the example code
• Optimisations with babel

Issues

If you find a bug, please file an issue on the issue tracker on GitHub.

Contribution

Please feel free to contribute or provide improvements.