Question

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");