Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sample of Pinterest Mweb code splitting
// Create a loader
const Closeup = () => import(/* webpackChunkName: "CloseupPage" */ 'app/mobile/routes/CloseupPage');
// Register it to the route
route('/pin/:pinId', routes.Closeup, { name: 'Closeup' }),
// Render a react-router-v4 Route with the route bundle loader
<Route exact key="matched-route" path={path} render={matchProps =>
<PageRoute
bundleLoader={loader}
routeName={name}
{...matchProps}
{...props}
/>}
/>
// Async load the route bundle
class PageRoute extends PureComponent {
render() {
const { bundleLoader, ...props } = this.props;
return <Loader loader={bundleLoader} {...props} />;
}
}
// Load it and render
class Loader extends PureComponent {
componentWillMount() {
this.props.loader().then(module => {
this.setState({ LoadedComponent: module.default });
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.