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-devThen 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 dependencies
const Component = require('react-proxy-loader!./Component');
// returns a mixin for the proxied component
// This allows you to setup rendering for the loading state for the proxy
const ComponentProxyMixin = require('react-proxy-loader!./Component').Mixin;
const ComponentProxy = React.createClass({
mixins: [ComponentProxyMixin],
renderUnavailable: function() {
return <p>Loading...</p>;
}
});Or specify the proxied components in your configuration:
// webpack.config.js
module.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:
var Component = require("react-proxy-loader?name=chunkName!./Component");And run webpack via your preferred method.
