react-code-splitting is an "old" library, React has implemented a great solution since and it's called React.lazy go get it !
You're working on a great app powered by React, bundled with webpack and your bundle size increases ... You're in the right place to solve this modern JS apps nightmare.
- You're using Webpack 2+
- You've polyfilled Promise to support old browser
<Login /> + <Home /> are loaded at the first start
import Login from './Login' import Home from './Home' const App = ({ user }) => ( <Body> {user.loggedIn ? <Route path="/" component={Home} /> : <Redirect to="/login" />} <Route path="/login" component={Login} /> </Body> )You're not logged in ? <Login /> component is the only loaded, <Home /> will be loaded when the user will be logged in.
Use componentProps to pass props to lazy loaded component.
import Async from 'react-code-splitting' import Login from './Login' const Home = () => <Async load={import('./Home')} /> const LostPassword = props => <Async load={import('./LostPassword')} componentProps={props}/> const App = ({ user }) => ( <Body> {user.loggedIn ? <Route path="/" component={Home} /> : <Redirect to="/login" />} <Route path="/login" component={Login} /> <Route path="/lostpassword" component={LostPassword} /> </Body> )You can view this snippets in context here !
- Why and how it works : Straightforward code splitting with React and Webpack
- Webpack examples
