react-proxy-loader

[![npm][npm]][npm-url] [![node][node]][node-url] [![deps][deps]][deps-url]

[![chat][chat]][chat-url]

通过将 react 组件包裹在一个代理组件中,来启用代码分离(code splitting)功能, 可以按需加载 react 组件和它的依赖。

要求

此模块需要 Node v6.9.0+ 和 webpack v4.0.0+。

起步

你需要预先安装 react-proxy-loader

$ npm install react-proxy-loader --save-dev

然后,在 webpack 配置中添加 loader。例如:

// 返回代理组件,并按需加载
// webpack 会为此组件和它的依赖创建一个额外的 chunk
const Component = require('react-proxy-loader!./Component');

// 返回代理组件的 mixin
// 可以在这里设置代理组件的加载中状态
const ComponentProxyMixin = require('react-proxy-loader!./Component').Mixin;

const ComponentProxy = React.createClass({
    mixins: [ComponentProxyMixin],
    renderUnavailable: function() {
        return <p>Loading...</p>;
    }
});

或者,在配置中指定需要代理的组件:

// webpack.config.js
module.exports = {
    module: {
        loaders: [
            /* ... */
            {
                test: [
                    /component\.jsx$/, // 通过正则表达式(RegExp)匹配选择组件
                    /\.async\.jsx$/, // 通过扩展名(extension)匹配选择组件
                    "/abs/path/to/component.jsx" // 通过绝对路径(absolute path)匹配选择组件
                ],
                loader: "react-proxy-loader"
            }
        ]
    }
};

或者,在 name 查询参数中提供一个 chunk 名称:

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

然后,通过你偏爱的方式去运行 webpack

License

MIT MIT" class="icon-link" href="#mit">