Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tom910/react-async-loading

Code splitting to React and Webpack
https://github.com/tom910/react-async-loading

async-component code-splitting react

Last synced: about 1 month ago
JSON representation

Code splitting to React and Webpack

Awesome Lists containing this project

README

        

# React Async Loading

```js
import { asyncComponent } from 'react-async-loading';
// And export module...
export default asyncComponent(() => System.import('./Link.js'));
```

Code splitting to React and Webpack

## Install

- Install the module: `npm install --save react-async-loading`
- Add plugin to you Webpack config:
```js
new webpack.optimize.CommonsChunkPlugin({
children: true, // necessary for splitting children chunks
async: true // necessary for async loading chunks
})
```

## Example
- [Simple](https://github.com/Tom910/react-async-loading/tree/master/example)

## API

### asyncComponent
#### Usage
```jsx
asyncComponent(() => System.import('./Link.js'), { placeholder:

Loading
})
```
or
```jsx
asyncComponent(() => require.ensure([], (require) => require('./Button.js'), 'Button'), { placeholder:
Loading
})
```

#### Props
##### - 1 argument
Required. There should be a function of the module is loaded. Webpack supports two varieties of modules. `SystemJS` and `require.ensure`. The only difference is in the syntax, and that you can specify the name of the chunk in require.ensure
- ``` System.import('./Link.js') ```
- ``` require.ensure([], (require) => require('./Button.js'), 'Button') ```

Webpack compiles
- `0.chunk.js` - numbers name in `SystemJS`
- `Button.chunk.js` - we set the name in `require.ensure`

##### - 2 argument
Setting options. Now available `placeholder` option, which displays the item is loaded chunk