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");
© 2012–2016 Tobias Koppers
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/loaders/react-proxy-loader/