react-proxy-loader

Wraps a react component in a proxy component to enable Code Splitting, which loads a react component and its dependencies on demand.

Requirements

This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.

Getting Started

To begin, you'll need to install react-proxy-loader:

$ npm install react-proxy-loader --save-dev

Then add the loader to your webpack config. For example:

// returns the proxied component, loaded on demand// webpack creates an additional chunk for this component and its dependenciesconstComponent=require('react-proxy-loader!./Component');// returns a mixin for the proxied component// This allows you to setup rendering for the loading state for the proxyconstComponentProxyMixin=require('react-proxy-loader!./Component').Mixin;constComponentProxy=React.createClass({mixins: [ComponentProxyMixin],renderUnavailable: function(){return<p>Loading...</p>;}});

Or specify the proxied components in your configuration:

// webpack.config.jsmodule.exports={module: {loaders: [/* ... */{test: [/component\.jsx$/,// select component by RegExp/\.async\.jsx$/,// select component by extension"/abs/path/to/component.jsx"// absolute path to component],loader: "react-proxy-loader"}]}};

Or provide a chunk name within a name query parameter:

varComponent=require("react-proxy-loader?name=chunkName!./Component");

And run webpack via your preferred method.

License

MIT