Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/tom910/react-async-loading
- Owner: Tom910
- License: mit
- Created: 2016-08-28T07:21:13.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-08-30T21:18:47.000Z (over 8 years ago)
- Last Synced: 2024-11-21T12:07:58.436Z (about 1 month ago)
- Topics: async-component, code-splitting, react
- Language: JavaScript
- Size: 19.5 KB
- Stars: 8
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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