https://github.com/webpack-contrib/react-proxy-loader
Wraps a react component in a proxy component to enable Code Splitting.
https://github.com/webpack-contrib/react-proxy-loader
reactjs webpack-loader
Last synced: about 1 month ago
JSON representation
Wraps a react component in a proxy component to enable Code Splitting.
- Host: GitHub
- URL: https://github.com/webpack-contrib/react-proxy-loader
- Owner: webpack-contrib
- License: mit
- Archived: true
- Created: 2014-07-08T11:44:33.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2018-07-27T13:56:11.000Z (over 7 years ago)
- Last Synced: 2026-01-14T01:38:11.926Z (about 2 months ago)
- Topics: reactjs, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 103 KB
- Stars: 256
- Watchers: 15
- Forks: 24
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![chat][chat]][chat-url]
# react-proxy-loader
Wraps a react component in a proxy component to enable Code Splitting, which
loads a react component and its dependencies on demand.
## Requirements
This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.
## Getting Started
To begin, you'll need to install `react-proxy-loader`:
```console
$ npm install react-proxy-loader --save-dev
```
Then add the loader to your `webpack` config. For example:
``` js
// returns the proxied component, loaded on demand
// webpack creates an additional chunk for this component and its dependencies
const Component = require('react-proxy-loader!./Component');
// returns a mixin for the proxied component
// This allows you to setup rendering for the loading state for the proxy
const ComponentProxyMixin = require('react-proxy-loader!./Component').Mixin;
const ComponentProxy = React.createClass({
mixins: [ComponentProxyMixin],
renderUnavailable: function() {
return
Loading...
;
}
});
```
Or specify the proxied components in your configuration:
``` js
// webpack.config.js
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"
}
]
}
};
```
Or provide a chunk name within a `name` query parameter:
``` js
var Component = require("react-proxy-loader?name=chunkName!./Component");
```
And run `webpack` via your preferred method.
## License
#### [MIT](./LICENSE)
[npm]: https://img.shields.io/npm/v/react-proxy-loader.svg
[npm-url]: https://npmjs.com/package/react-proxy-loader
[node]: https://img.shields.io/node/v/react-proxy-loader.svg
[node-url]: https://nodejs.org
[deps]: https://david-dm.org/webpack-contrib/react-proxy-loader.svg
[deps-url]: https://david-dm.org/webpack-contrib/react-proxy-loader
[tests]: https://img.shields.io/circleci/project/github/webpack-contrib/react-proxy-loader.svg
[tests-url]: https://circleci.com/gh/webpack-contrib/react-proxy-loader
[cover]: https://codecov.io/gh/webpack-contrib/react-proxy-loader/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/webpack-contrib/react-proxy-loader
[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
[chat-url]: https://gitter.im/webpack/webpack