Reduce your Meteor.js client-side bundle, dynamically import your React.js components.
MIT License
Reduce your Meteor.js client-side bundle, dynamically import your React.js components. See this blog post for background information and example usage: https://www.ninjapixel.io/meteor-bundle-size.html
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import DeferredComponent from '@ninjapixel/meteor-deferred-component';
const LoadingComponent = () => (
<div className="loading">
<h3>Fetching component...</h3>
</div>
);
const HomeScreen = props => (
<div>
<header>
<h1>The App</h1>
</header>
<p>
Some text...
</p></div>
);
export default class App extends Component {
render() {
return (
<Router>
<div className="App">
<Switch>
<Route path="/" exact render={routeProps => (<HomeScreen {...routeProps} />)} />
<Route path="/test" exact render={routeProps => (<DeferredComponent loadingComponent={<LoadingComponent />} importFunction={() => import('/imports/ui/screens/Test/Test.js')} {...routeProps} name="Meteor developer" />)} />
</Switch>
</div>
</Router>
);
}
}