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。