webpack-contrib / React Proxy Loader
Licence: mit
Wraps a react component in a proxy component to enable Code Splitting.
Stars: ✭ 258
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to React Proxy Loader
webpack-modernizr-loader
Get your modernizr build bundled with webpack, use modernizr with webpack easily
Stars: ✭ 35 (-86.43%)
Mutual labels: webpack-loader
standard-loader
webpack loader for linting your code with https://github.com/feross/standard
Stars: ✭ 66 (-74.42%)
Mutual labels: webpack-loader
graphql-raw-loader
🍖 With Webpack, loads GraphQL files as raw strings and handle it's import directive & comment statement.
Stars: ✭ 19 (-92.64%)
Mutual labels: webpack-loader
vue-template-compiler-loader
Webpack loader to pre-compile Vue 2.0 templates
Stars: ✭ 26 (-89.92%)
Mutual labels: webpack-loader
slim-lang-loader
Webpack loader: slim => html => javascript
Stars: ✭ 20 (-92.25%)
Mutual labels: webpack-loader
markup-inline-loader
a webpack loader to embed svg/MathML to html
Stars: ✭ 24 (-90.7%)
Mutual labels: webpack-loader
typed-css-modules-loader
💠 Webpack loader for typed-css-modules auto-creation
Stars: ✭ 62 (-75.97%)
Mutual labels: webpack-loader
Webpack-4-boilerplate
🚀 Webpack 4 with ES6+ and SASS,LESS/STYLUS support + dev-server and livereload
Stars: ✭ 55 (-78.68%)
Mutual labels: webpack-loader
graphql-loader
🍒 A webpack loader for .graphql documents
Stars: ✭ 60 (-76.74%)
Mutual labels: webpack-loader
React-bookstore
Bookstore using google-book Apis made with reactjs🔥🚀
Stars: ✭ 14 (-94.57%)
Mutual labels: webpack-loader
exif-loader
Extract EXIF- & IPTC-data from your JPGs during build-time.
Stars: ✭ 14 (-94.57%)
Mutual labels: webpack-loader
preprocessor-loader
Bring the awesome "Conditional Compilation" to the Webpack, and more.
Stars: ✭ 32 (-87.6%)
Mutual labels: webpack-loader
stylos
Webpack plugin to automatically generate and inject CSS utilities to your application
Stars: ✭ 60 (-76.74%)
Mutual labels: webpack-loader
color-loader
🎨 A webpack loader that extracts the color palette of an image
Stars: ✭ 14 (-94.57%)
Mutual labels: webpack-loader
yaml-frontmatter-loader
[DEPRECATED] Yaml frontmatter loader
Stars: ✭ 12 (-95.35%)
Mutual labels: webpack-loader
sass-to-string
webpack loader that transform your SCSS file in a javascript string
Stars: ✭ 17 (-93.41%)
Mutual labels: webpack-loader
web-components-loader
Webpack loader that makes it incredibly easy to import HTML-centric Web Components into your project.
Stars: ✭ 34 (-86.82%)
Mutual labels: webpack-loader
ts-interface-loader
Webpack support for validating TypeScript definitions at runtime.
Stars: ✭ 19 (-92.64%)
Mutual labels: webpack-loader
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].