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");
// => 返回代理组件(它按需加载。)
// (webpack 为此组件及其依赖项创建一个额外的 chunk)
var ComponentProxyMixin = require("react-proxy-loader!./Component").Mixin;
// => 返回代理组件的 mixin
// (这允许你为 proxy 的加载状态设置渲染)
var ComponentProxy = React.createClass({
mixins: [ComponentProxyMixin],
renderUnavailable: function() {
return <p>Loading...</p>;
}
});
代理是一个react组件。所有属性都将传输到包装组件。
代替(或除了)内联 loader 调用之外,还可以在配置中指定代理组件:
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"
}
]
}
};
你可以使用 name
查询参数为该 chunk 提供名称:
var Component = require("react-proxy-loader?name=chunkName!./Component");
Juho Vepsäläinen | Joshua Wiens | Kees Kluskens | Sean Larkin |