npm install react-modulesreact-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 ?
- isomorphic / SSR friendly
- transpiles to webpack-friendly split points 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) : DOMelementexample -
`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.
plugin
-
react-modules/babel - wraps Modules components' load props with require.ensure boilerplate, generating code splitsextractEntries
-
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