didierfranc / React Code Splitting
Licence: mit
Code splitting won't be a nightmare anymore !
Stars: ✭ 209
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Code Splitting
Saas Base
SaaS base application (Flask, Vue, Bootstrap, Webpack)
Stars: ✭ 208 (-0.48%)
Mutual labels: webpack
Heyui
🎉UI Toolkit for Web, Vue2.0 http://www.heyui.top
Stars: ✭ 2,373 (+1035.41%)
Mutual labels: webpack
React Cordova Boilerplate
TodoMVC example for react with development tools to build a cordova application
Stars: ✭ 206 (-1.44%)
Mutual labels: webpack
Electron Vue
An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.
Stars: ✭ 14,610 (+6890.43%)
Mutual labels: webpack
React Isomorphic Starterkit
Create an isomorphic React app in less than 5 minutes
Stars: ✭ 2,326 (+1012.92%)
Mutual labels: webpack
Docker Web Framework Examples
Example apps that demonstate how to use Docker with your favorite web frameworks.
Stars: ✭ 204 (-2.39%)
Mutual labels: webpack
React Expressjs
Simple and compact boilerplate for ReactJS project with expressJS
Stars: ✭ 208 (-0.48%)
Mutual labels: webpack
Mobile App Landingpage Template
📱 Free to use static generated website template for your mobile app
Stars: ✭ 208 (-0.48%)
Mutual labels: webpack
Vue2.0 Multi Page
基于vue-cli(vue2.X，webpack1.X，es6，sass环境)多页面开发
Stars: ✭ 206 (-1.44%)
Mutual labels: webpack
Webpack Dashboard
A CLI dashboard for webpack dev server
Stars: ✭ 13,850 (+6526.79%)
Mutual labels: webpack
Preserver
Preserver is desktop notes organiser built on electron, angular2, pouchDB
Stars: ✭ 207 (-0.96%)
Mutual labels: webpack
Front End Guide
📚 Study guide and introduction to the modern front end stack.
Stars: ✭ 14,073 (+6633.49%)
Mutual labels: webpack
Preact Worker Demo
Demo of preact rendering an entire app in a Web Worker.
Stars: ✭ 204 (-2.39%)
Mutual labels: webpack
Firefly
Web app boilerplate for beginners based on Firebase and React 🔥
Stars: ✭ 204 (-2.39%)
Mutual labels: webpack
Webpack Stylish
A stylish, optionated reporter for webpack
Stars: ✭ 207 (-0.96%)
Mutual labels: webpack
React Netease Music
React Netease Music——一个基于React、TypeScript的高仿网易云mac客户端🎵播放器。
Stars: ✭ 205 (-1.91%)
Mutual labels: webpack
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
<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
- Why and how it works : Straightforward code splitting with React and Webpack
- Webpack examples
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].