Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/threepointone/react-modules
code splitting as a component
https://github.com/threepointone/react-modules
Last synced: 7 days ago
JSON representation
code splitting as a component
- Host: GitHub
- URL: https://github.com/threepointone/react-modules
- Owner: threepointone
- Created: 2016-09-21T11:20:32.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2016-09-24T04:54:43.000Z (about 8 years ago)
- Last Synced: 2024-05-02T05:41:28.877Z (6 months ago)
- Language: JavaScript
- Size: 31.3 KB
- Stars: 171
- Watchers: 9
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
react-modules
---
[work in progress]
`npm install react-modules babel-template --save`
code splitting as a component
```jsx
import { Modules } from 'react-modules'
{
// or arrays, or objects, whatevs
App => App ?
:
loading...
}
```
- isomorphic / SSR friendly
- transpiles to [webpack-friendly split points](https://webpack.github.io/docs/code-splitting.html) with a plugin(`react-modules/babel`)
- with helpers to preserve server-rendered html until module loads
- leverage the structure of your app to efficiently split/load your javascript bundles
api
---
##
```jsx
{
([A, B { c:C }]) => {...}
}
```
- `load={reqs}` - return the required modules with `require`. with the plugin, this will be converted to webpack code split points.
- `onError={fn}` - catch errors
- `include={bool}` - bypasses the code split
- `defer={bool}` - loads the scripts only in the trasnpiled version
- `chunkName={str}` - optional, acts as third argument to the backing `require.ensure()` call for named chunks
- `entry={name}` - (experimental) include chunk into `name` entry. works in tandem with `extractEntries()` (TODO - accept multiple entries)
## html persistence helpers
a set of helpers to preserve server/static-rendered html, until its 'parent' module loads.
this is useful when the component is heavy, but you still want to show prerendered html while the chunk loads
- `preserve(id, DOMelement) : DOMelement`
- `preserved(id) : DOMelement`
example -
```jsx
{
A => A ? preserve('myhtml',
): // on SSR, this will generate html
preserved('myhtml') || // on browser, use the cached html, until the module loads up
loading... // if neither available, show loading state
}
```
Use sparingly! This will probably break react's checksum algo, but that's the tradeoff you'll need for this behavior.
NB: to prime the cache, import and call `hydrate()` right before you call `ReactDOM.render()`.
## plugin
- `react-modules/babel` - wraps `Modules` components' `load` props with `require.ensure` boilerplate, generating code splits
## extractEntries
- `extractEntries(filepath)` (experimental) - statically analyze module and generate webpack entries
## extractResourceMap
- `extractResourceMap(filepath)` (experimental) - statically analyze an app and generate urlpattern -> entries map. works in tandem with react-router@4.
todo
---
- docs
- tests
- custom `` component that accepts entry/load
- `express` helper/middleware to serve bundles
- hmr compat
- arbit file types / webpack loader compat
- browserify compat
- react-native