❤
npm
Sign UpSign In

react-code-splitting

1.2.1 • Public • Published

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

<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>
)

With code splitting

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 !

More

Readme

Keywords

none

Package Sidebar

Install

npm i react-code-splitting

Repository

github.com/didierfranc/react-code-splitting

Homepage

github.com/didierfranc/react-code-splitting#readme

Weekly Downloads

2,387

Version

1.2.1

License

MIT

Last publish

Collaborators

  • didierfranc
Try on RunKit
Report malware