首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

react-proxy-loader

包装代理组件中的反应组件以启用代码分割(按需加载反应组件及其依赖项)。

安装

代码语言:javascript
复制
npm install react-proxy-loader

用法

代码语言:javascript
复制
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>;
    }
});

代理是一个反应组件。所有属性都被传送到包装组件。

组态

代替(或除了)内联 loader 调用之外,还可以在配置中指定代理组件:

代码语言:javascript
复制
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查询参数为该块提供一个名称:

代码语言:javascript
复制
var Component = require("react-proxy-loader?name=chunkName!./Component");

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com