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