react-modules
[work in progress]
npm install react-modules babel-template --save
code splitting as a component
import { Modules } from 'react-modules'
<Modules
load={require('./App.js')}>{
// or arrays, or objects, whatevs
App => App ?
<div><App /></div> :
<span>loading...</span>
}</Modules>
- 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
<Modules load={[require('A'), require('B'), {c: require('C')}]}>{
([A, B { c:C }]) => {...}
}</Modules>
load={reqs}- return the required modules withrequire. with the plugin, this will be converted to webpack code split points.onError={fn}- catch errorsinclude={bool}- bypasses the code splitdefer={bool}- loads the scripts only in the trasnpiled versionchunkName={str}- optional, acts as third argument to the backingrequire.ensure()call for named chunksentry={name}- (experimental) include chunk intonameentry. works in tandem withextractEntries()(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) : DOMelementpreserved(id) : DOMelement
example -
<Module load={require('./a').default}>{
A => A ? preserve('myhtml', <div><App/></div>): // on SSR, this will generate html
preserved('myhtml'), // on browser, use the cached html, until the module loads up
<span>loading...</span> // if neither available, show loading state
}</Module>
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- wrapsModulescomponents'loadprops withrequire.ensureboilerplate, 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
<Match/>component that accepts entry/load expresshelper/middleware to serve bundles- hmr compat
- arbit file types / webpack loader compat
- browserify compat
- react-native