https://github.com/jeantimex/react-webpack-code-splitting
:trident: A demo of how to split the code for a React Webpack application.
https://github.com/jeantimex/react-webpack-code-splitting
code-splitting react react-router-v3 webpack-dev-server webpack2
Last synced: 25 days ago
JSON representation
:trident: A demo of how to split the code for a React Webpack application.
- Host: GitHub
- URL: https://github.com/jeantimex/react-webpack-code-splitting
- Owner: jeantimex
- License: mit
- Created: 2017-07-07T17:48:02.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-08-30T05:41:02.000Z (almost 8 years ago)
- Last Synced: 2025-05-06T16:16:31.784Z (about 1 month ago)
- Topics: code-splitting, react, react-router-v3, webpack-dev-server, webpack2
- Language: JavaScript
- Homepage:
- Size: 257 KB
- Stars: 1
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# How to Code Split with React Router and Webpack
## About
Webpack is an awesome tool for bundling front end assets including JavaScript, CSS etc. The output bundle size can be big and that will cause loading slowness and poor user experiences, we should only load the assets on demand for each route.
Luckily React Router allows us to load the components asynchronously and Webpack can bundle the components into chunks. For example, there are three routes, and Each route is associate with a React component:
- /home (Home.js)
- /about (About.js)
- /users (Users.js)
You don't want to bundle them all into one giant App.js. In React Router, we can use System.import (or requre.ensure) to load each component for each route, like so:
```javascript
getComponent(location, cb) {
require.ensure([], (require) => {
cb(null, require('./components/Home').default)
}, 'Home'); // Output Home.chunk.js
}
```
or
```javascript
getComponent(location, cb) {
System.import('./components/Home' /* webpackChunkName:'Home' */)
.then(loadRoute(cb, false))
.catch(errorLoading);
},
```
Then all we need to do in the Webpack config is to specify the chunk filename:
```
output: {
...
chunkFilename: '[name].[chunkhash].chunk.js',
...
},
```
Now when you navigate to each route, only the necessary component will be loaded.
## Quick start
1. Clone this repo using `git clone https://github.com/jeantimex/react-webpack-code-splitting.git`
2. Run `yarn` or `npm install` to install the dependencies
3. Run `yarn start` and see the example app at `http://localhost:3000`
## License
This project is licensed under the MIT license, Copyright (c) 2017 Yong Su. For more information see `LICENSE.md`.