Wraps a react component in a proxy component to enable Code Splitting.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.github refactor(defaults): apply webpack-defaults (#33) Apr 5, 2018
example
lib refactor(defaults): apply webpack-defaults (#33) Apr 5, 2018
.babelrc refactor(defaults): apply webpack-defaults (#33) Apr 5, 2018
.editorconfig refactor(defaults): apply webpack-defaults (#33) Apr 5, 2018
.eslintignore refactor(defaults): apply webpack-defaults (#33) Apr 5, 2018
.eslintrc.js refactor(defaults): apply webpack-defaults (#33) Apr 5, 2018
.gitattributes
.gitignore refactor(defaults): apply webpack-defaults (#33) Apr 5, 2018
.prettierrc refactor(defaults): apply webpack-defaults (#33) Apr 5, 2018
CHANGELOG.md refactor(defaults): apply webpack-defaults (#33) Apr 5, 2018
LICENSE chore(license): add JSF license Feb 21, 2017
README.md docs: remove badge link to non-existent circle-ci url (#34) Jul 27, 2018
appveyor.yml refactor(defaults): apply webpack-defaults (#33) Apr 5, 2018
codecov.yml refactor(defaults): apply webpack-defaults (#33) Apr 5, 2018
commitlint.config.js refactor(defaults): apply webpack-defaults (#33) Apr 5, 2018
package-lock.json
package.json refactor(defaults): apply webpack-defaults (#33) Apr 5, 2018

README.md

npm node deps

chat

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:

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

Then add the loader to your webpack config. For example:

// 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 <p>Loading...</p>;
	}
});

Or specify the proxied components in your configuration:

// 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:

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

And run webpack via your preferred method.

License

MIT