Skip to content

Commit 5a48366

Browse files
ArunMichaelDsouzaArunMichaelDsouza
committed
Code splitting demo with react loadable added
1 parent 230553a commit 5a48366

20 files changed

+5992
-10316
lines changed

‎.babelrc

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"presets": [
3+
"@babel/preset-react",
4+
"@babel/preset-env"
5+
],
6+
"plugins": [
7+
"@babel/plugin-syntax-dynamic-import"
8+
]
9+
}

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ pids
1010
*.pid
1111
*.seed
1212
*.pid.lock
13+
build
1314

1415
# Directory for instrumented libs generated by jscoverage/JSCover
1516
lib-cov

‎package-lock.json

+5,860
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+29-24
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,36 @@
11
{
22
"name": "workshop-02-react-js-code-splitting",
3-
"version": "0.1.0",
4-
"private": true,
3+
"version": "1.0.0",
4+
"description": "React JS Code Splitting - Why and How? workshop",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "./node_modules/.bin/webpack --config ./webpack.config.js && ./node_modules/.bin/serve -s ./public"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/React-Delhi-NCR/workshop-02-react-js-code-splitting.git"
12+
},
13+
"author": "",
14+
"license": "ISC",
15+
"bugs": {
16+
"url": "https://github.com/React-Delhi-NCR/workshop-02-react-js-code-splitting/issues"
17+
},
18+
"homepage": "https://github.com/React-Delhi-NCR/workshop-02-react-js-code-splitting#readme",
519
"dependencies": {
620
"react": "^16.8.6",
721
"react-dom": "^16.8.6",
8-
"react-scripts": "3.0.1"
9-
},
10-
"scripts": {
11-
"start": "react-scripts start",
12-
"build": "react-scripts build",
13-
"test": "react-scripts test",
14-
"eject": "react-scripts eject"
15-
},
16-
"eslintConfig": {
17-
"extends": "react-app"
22+
"react-loadable": "^5.5.0",
23+
"react-router": "^5.0.1",
24+
"react-router-dom": "^5.0.1"
1825
},
19-
"browserslist": {
20-
"production": [
21-
">0.2%",
22-
"not dead",
23-
"not op_mini all"
24-
],
25-
"development": [
26-
"last 1 chrome version",
27-
"last 1 firefox version",
28-
"last 1 safari version"
29-
]
26+
"devDependencies": {
27+
"@babel/core": "^7.4.5",
28+
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
29+
"@babel/preset-env": "^7.4.5",
30+
"@babel/preset-react": "^7.0.0",
31+
"babel-loader": "^8.0.6",
32+
"serve": "^11.0.2",
33+
"webpack": "^4.35.0",
34+
"webpack-cli": "^3.3.5"
3035
}
31-
}
36+
}

‎public/favicon.ico

-3.78 KB
Binary file not shown.

‎public/index.html

+9-35
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,12 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
8-
<!--
9-
manifest.json provides metadata used when your web app is installed on a
10-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
11-
-->
12-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
13-
<!--
14-
Notice the use of %PUBLIC_URL% in the tags above.
15-
It will be replaced with the URL of the `public` folder during the build.
16-
Only files inside the `public` folder can be referenced from the HTML.
1+
<html>
172

18-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19-
work correctly both with client-side routing and a non-root public URL.
20-
Learn how to configure a non-root public URL by running `npm run build`.
21-
-->
22-
<title>React App</title>
23-
</head>
24-
<body>
25-
<noscript>You need to enable JavaScript to run this app.</noscript>
26-
<div id="root"></div>
27-
<!--
28-
This HTML file is a template.
29-
If you open it directly in the browser, you will see an empty page.
3+
<head>
4+
<title>React loadable + webpack code splitting</title>
5+
</head>
306

31-
You can add webfonts, meta tags, or analytics to this file.
32-
The build step will place the bundled scripts into the <body> tag.
7+
<body>
8+
<main id="app"></main>
9+
<script src="./build/bundle.js"></script>
10+
</body>
3311

34-
To begin the development, run `npm start` or `yarn start`.
35-
To create a production bundle, use `npm run build` or `yarn build`.
36-
-->
37-
</body>
38-
</html>
12+
</html>

‎public/manifest.json

-15
This file was deleted.

‎src/App.css

-33
This file was deleted.

‎src/App.js

-26
This file was deleted.

‎src/App.test.js

-9
This file was deleted.

‎src/Home.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
3+
const Home = () => {
4+
return 'Home';
5+
};
6+
7+
export default Home;

‎src/Loader.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
3+
const Loader = () => {
4+
return 'Loading...';
5+
};
6+
7+
export default Loader;

‎src/Profile.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
3+
const Profile = () => {
4+
return 'Profile';
5+
};
6+
7+
export default Profile;

‎src/Settings.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
3+
const Settings = () => {
4+
return 'Settings';
5+
};
6+
7+
export default Settings;

‎src/index.css

-13
This file was deleted.

‎src/index.js

+39-8
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,43 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import './index.css';
4-
import App from './App';
5-
import * as serviceWorker from './serviceWorker';
3+
import Loadable from 'react-loadable';
4+
import { BrowserRouter, Route, Link } from "react-router-dom";
5+
import Loader from './Loader';
66

7-
ReactDOM.render(<App />, document.getElementById('root'));
7+
const H = Loadable({
8+
loader: () => import(/* webpackChunkName: 'home' */ './Home'),
9+
loading: Loader
10+
}), P = Loadable({
11+
loader: () => import(/* webpackChunkName: 'profile' */ './Profile'),
12+
loading: Loader
13+
}), S = Loadable({
14+
loader: () => import(/* webpackChunkName: 'settings' */ './Settings'),
15+
loading: Loader
16+
});
817

9-
// If you want your app to work offline and load faster, you can change
10-
// unregister() to register() below. Note this comes with some pitfalls.
11-
// Learn more about service workers: https://bit.ly/CRA-PWA
12-
serviceWorker.unregister();
18+
ReactDOM.render(<div>
19+
<BrowserRouter>
20+
<ul className="sidebar">
21+
<li>
22+
<Link to="/">
23+
Home
24+
</Link>
25+
</li>
26+
<li>
27+
<Link to="/profile">
28+
Profile
29+
</Link>
30+
</li>
31+
<li>
32+
<Link to="/settings">
33+
Settings
34+
</Link>
35+
</li>
36+
</ul>
37+
<div>
38+
<Route exact path="/" component={H} />
39+
<Route exact path="/profile" component={P} />
40+
<Route exact path="/settings" component={S} />
41+
</div>
42+
</BrowserRouter>
43+
</div>, document.getElementById('app'));

‎src/logo.svg

-7
This file was deleted.

0 commit comments

Comments
 (0)