react-code-splitting ✂️

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.

Prerequisite

- You're using Webpack 2
- You've polyfilled Promise to support old browser

How-to

#### Without code splitting

+ are loaded at the first start
``jsx
import Login from './Login'
import Home from './Home'

const App = ({ user }) => (

{user.loggedIn ? : }


)
`

#### With code splitting

You're not logged in ? component is the only loaded, will be loaded when the user will be logged in.

Use componentProps to pass props to lazy loaded component.

`jsx
import Async from 'react-code-splitting'

import Login from './Login'
const Home = () =>
const LostPassword = props =>

const App = ({ user }) => (

{user.loggedIn ? : }



)
``

You can view this snippets in context here !

More

- Why and how it works : Straightforward code splitting with React and Webpack
- Webpack examples