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：

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

然后，在 webpack 配置中添加 loader。例如：

  1. // 返回代理组件，并按需加载
  2. // webpack 会为此组件和它的依赖创建一个额外的 chunk
  3. const Component = require('react-proxy-loader!./Component');
  5. // 返回代理组件的 mixin
  6. // 可以在这里设置代理组件的加载中状态
  7. const ComponentProxyMixin = require('react-proxy-loader!./Component').Mixin;
  9. const ComponentProxy = React.createClass({
  10.     mixins: [ComponentProxyMixin],
  11.     renderUnavailable: function() {
  12.         return <p>Loading...</p>;
  13.     }
  14. });

或者，在配置中指定需要代理的组件：

  1. // webpack.config.js
  2. module.exports = {
  3.     module: {
  4.         loaders: [
  5.             /* ... */
  6.             {
  7.                 test: [
  8.                     /component\.jsx$/, // 通过正则表达式(RegExp)匹配选择组件
  9.                     /\.async\.jsx$/, // 通过扩展名(extension)匹配选择组件
  10.                     "/abs/path/to/component.jsx" // 通过绝对路径(absolute path)匹配选择组件
  11.                 ],
  12.                 loader: "react-proxy-loader"
  13.             }
  14.         ]
  15.     }
  16. };

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

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

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

License

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