https://github.com/kamleshchandnani/react-chunkable
:boom: Simplest way to code split and load async chunks using Webpack and React Router V4
https://github.com/kamleshchandnani/react-chunkable
async-chunks codesplitting magic-comments react react-router-v4 webpack
Last synced: 9 months ago
JSON representation
:boom: Simplest way to code split and load async chunks using Webpack and React Router V4
- Host: GitHub
- URL: https://github.com/kamleshchandnani/react-chunkable
- Owner: kamleshchandnani
- License: mit
- Created: 2017-07-01T08:49:16.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-12-22T05:33:55.000Z (over 8 years ago)
- Last Synced: 2025-09-10T12:26:11.708Z (9 months ago)
- Topics: async-chunks, codesplitting, magic-comments, react, react-router-v4, webpack
- Language: JavaScript
- Homepage:
- Size: 230 KB
- Stars: 17
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-chunkable 🍕
Simplest way to code split and load async chunks
## Prerequisite
`Webpack 2.x.x/3.x.x`
`React Router 4.x.x`
## Installation
```
yarn add react-chunkable
```
or
```
npm install react-chunkable --save
```
## Usage
Load as you go. In a traditional SPA, Instead of downloading the entire bundle on the client side, split your code which makes your user to download the piece of code as and when required.
Code splitting is a Webpack feature that enables a JS bundle within a single build to be split up and loaded on-demand in smaller parts.
#### Without Code Splitting
The entire app is bundled in a single js file i.e HomePage and ProfilePage are loaded at the first start itself, though the ProfilePage is not required at the first start.
```jsx
import HomePage from "./pages/home";
import ProfilePage from "./pages/profile";
class Routes extends PureComponent {
render() {
return (
} />
} />
);
}
}
```
#### With Code Splitting
With Code Splitting only the HomePage is loaded at the first load. When the user visits ProfilePage at that time the chunk for ProfilePage will be loaded.
```jsx
import ComponentChunk from "react-chunkable";
const HomePage = props =>
();
const ProfilePage = props =>
();
class Routes extends PureComponent {
render() {
return (
} />
} />
);
}
}
```
### Magic Comments
Webpack 2.4.0 introduced one feature called "magic comments". Now you can name the chunks corresponding to the modules/components you import.
`import(/* webpackMode: "lazy",webpackChunkName: "profile" */ "./pages/profile")` this statement indicates webpack to consider this as a split point and load it in a separate bundle.
`webpackMode: "lazy"` indicates webpack to lazily load this chunk.
`webpackChunkName: "profile"` allows you to name your chunk.
[More Info on other available options](https://webpack.js.org/api/module-methods/#import-)
## Production
In the project directory, you can run:
`yarn build`
Builds the library for production to the `dist` folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
## Example
Check out the [example applications](https://github.com/kamleshchandnani/react-chunkable/tree/master/examples) to see how simple this is.
## SSR?
Well, really do you need it? [Check this](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/code-splitting.md)
## Support
Please [open an issue](https://github.com/kamleshchandnani/react-chunkable/issues/new) for support.
## Like it?
:star: this repo
## License
MIT © [Kamlesh Chandnani](https://github.com/kamleshchandnani)