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


npm install react-proxy-loader


var Component = require("react-proxy-loader!./Component");
// => returns the proxied component (It loads on demand.)
// (webpack creates an additional chunk for this component and its dependencies)

var ComponentProxyMixin = require("react-proxy-loader!./Component").Mixin;
// => returns a mixin for the proxied component
// (This allows you to setup rendering for the loading state for the proxy)
var ComponentProxy = React.createClass({
    mixins: [ComponentProxyMixin],
    renderUnavailable: function() {
        return <p>Loading...</p>;

The proxy is a react component. All properties are transferred to the wrapped component.


Instead of (or in addition to) inlining the loader call you can also specify the proxied components in your configuration:

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"


You can give the chunk a name with the name query parameter:

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


Juho Vepsäläinen

Joshua Wiens

Kees Kluskens

Sean Larkin