react-modules

code splitting as a component

  • Owner: threepointone/react-modules
  • Platform:
  • License::
  • Category::
  • Topic:
  • Like:
    0
      Compare:

Github stars Tracking Chart

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 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 -

<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 - 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 <Match/> component that accepts entry/load
  • express helper/middleware to serve bundles
  • hmr compat
  • arbit file types / webpack loader compat
  • browserify compat
  • react-native

Main metrics

Overview
Name With Ownerthreepointone/react-modules
Primary LanguageJavaScript
Program languageJavaScript (Language Count: 1)
Platform
License:
所有者活动
Created At2016-09-21 11:20:32
Pushed At2016-09-24 04:54:43
Last Commit At2016-09-24 10:24:36
Release Count8
Last Release Namev1.0.8 (Posted on 2016-09-24 10:01:41)
First Release Namev1.0.1 (Posted on 2016-09-21 17:31:36)
用户参与
Stargazers Count170
Watchers Count9
Fork Count2
Commits Count34
Has Issues Enabled
Issues Count0
Issue Open Count0
Pull Requests Count0
Pull Requests Open Count0
Pull Requests Close Count1
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private