brotzky / Code Splitting React Webpack
An example of how to code split with Webpack 2 and React Router
Stars: ✭ 138
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Code Splitting React Webpack
Loadable Components
The recommended Code Splitting library for React ✂️✨
Stars: ✭ 6,194 (+4388.41%)
Mutual labels: webpack, code-splitting, react-router
React Redux Universal Boilerplate
An Universal ReactJS/Redux Boilerplate
Stars: ✭ 165 (+19.57%)
Mutual labels: webpack, code-splitting, react-router
Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (-76.81%)
Mutual labels: webpack, code-splitting, react-router
React Router Server
Server Side Rendering library for React Router v4.
Stars: ✭ 443 (+221.01%)
Mutual labels: webpack, code-splitting, react-router
React Router Animation Examples
An example using React Router and React's Animations
Stars: ✭ 80 (-42.03%)
Mutual labels: webpack, code-splitting, react-router
Redux Cnode
react+react-router+redux+es6+antd-mobile+webpack版本的Cnode
Stars: ✭ 96 (-30.43%)
Mutual labels: webpack, react-router
Koa Mobx React Starter
A straightforward starter for Node javascript web projects. Using Koa, MobX and ReactJS (with universal / isomorphic server rendering)
Stars: ✭ 102 (-26.09%)
Mutual labels: webpack, react-router
React Koa Login
koa2 + react + react-router(4.0) + redux + webpack + antd
Stars: ✭ 109 (-21.01%)
Mutual labels: webpack, react-router
React Redux Auth0 Kit
Minimal starter boilerplate project with CRA, React, Redux, React Router and Auth0 authentication
Stars: ✭ 115 (-16.67%)
Mutual labels: webpack, react-router
React Antd Admin
用React和Ant Design搭建的一个通用管理后台
Stars: ✭ 1,313 (+851.45%)
Mutual labels: webpack, react-router
React Async Component
Resolve components asynchronously, with support for code splitting and advanced server side rendering use cases.
Stars: ✭ 1,441 (+944.2%)
Mutual labels: webpack, code-splitting
React Redux Starter
A basic template that consists of the essential elements that are required to start building a Single Page Application using React, React Router, Redux, Bootstrap 4, Sass, and Webpack
Stars: ✭ 116 (-15.94%)
Mutual labels: webpack, react-router
Molecule
⚛️ – :atom: – ⚛️ Boilerplate for cross platform web/native react apps with electron.
Stars: ✭ 95 (-31.16%)
Mutual labels: webpack, react-router
React Bootstrap Webpack Starter
ReactJS 16.4 + new React Context API +react Router 4 + webpack 4 + babel 7+ hot Reload + Bootstrap 4 + styled-components
Stars: ✭ 103 (-25.36%)
Mutual labels: webpack, react-router
Webpack Core Usage
webpack2完整系列课程，欢迎阅读。同时欢迎移步我的react全家桶文章全集: https://github.com/liangklfangl/react-article-bucket
Stars: ✭ 94 (-31.88%)
Mutual labels: webpack, react-router
Universal React Redux
🧐 A sensible universal starter kit for React + Redux
Stars: ✭ 112 (-18.84%)
Mutual labels: webpack, react-router
React Redux Graphql Apollo Bootstrap Webpack Starter
react js + redux + graphQL + Apollo + react router + hot reload + devTools + bootstrap + webpack starter
Stars: ✭ 127 (-7.97%)
Mutual labels: webpack, react-router
Awesome Bundle Size
📝 An awesome list of tools and techniques to make your web bundle size smaller and your web apps load faster.
Stars: ✭ 118 (-14.49%)
Mutual labels: webpack, code-splitting
Monitaure
🔔 A server uptime monitoring progressive web application - NO LONGER MAINTAINED
Stars: ✭ 135 (-2.17%)
Mutual labels: webpack, react-router
Code Splitting with React Router v3 and Webpack 2/3
An example of how to code split a React application using Webpack 2/3 and React Router v3.
Guide
There is an easy to follow guide to help you fully understand the concepts.
Installation and Starting
git clone https://github.com/brotzky/code-splitting-react-webpack.git && cd code-splitting-react-webpack
yarn
yarn start
> visit localhost:3000
# or npm
npm install
npm start
> visit localhost:3000
Technology
The technology used for this example:
- React
- React Router v3
- Webpack 2 or 3
- Babel
Directory
The content you should focus on to get a better idea of what is going on.
code-splitting/
| package.json
|
└───src/
│ │
│ └───modules/
│ | Core.js
│ | ...
│ |
│ └───root/
│ | index.js
│ |
│ └───routes/
│ | index.js
│ │
│ │ index.html
│ │ index.js
│
│
└───webpack/
webpack-dev-server.js
webpack.config.js
React Router v4
The React Router docs have a simple guide for code splitting
Made by Dennis Brotzky. If you need help please file an issue or contact me through twitter!
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].