Need help with react-code-splitting?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

didierfranc
210 Stars 18 Forks MIT License 42 Commits 6 Opened issues

Description

Code splitting won't be a nightmare anymore !

Services available

!
?

Need anything else?

Contributors list

No Data

react-code-splitting ✂️

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.

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.

import Async from 'react-code-splitting'

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

const App = ({ user }) => (

{user.loggedIn ? <route path="/" component="{Home}"></route> : <redirect to="/login"></redirect>}
<route path="/login" component="{Login}"></route>
<route path="/lostpassword" component="{LostPassword}"></route>

)

You can view this snippets in context here !

More

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.