Skip to content

Commit 689778f

Browse files
xidedixxidedix
authored
Merge pull request #77 from coreui/dev-code-splitting
refactor: code splitting via dynamic import
2 parents 7756e1e + 49e86ad commit 689778f

File tree

4 files changed

+214
-76
lines changed

4 files changed

+214
-76
lines changed

‎package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@coreui/coreui-free-react-admin-template",
3-
"version": "2.0.0-rc.1",
3+
"version": "2.0.0",
44
"description": "CoreUI React Open Source Bootstrap 4 Admin Template",
55
"author": "Łukasz Holeczek",
66
"homepage": "https://coreui.io",
@@ -12,7 +12,7 @@
1212
"url": "[email protected]:coreui/coreui-free-react-admin-template.git"
1313
},
1414
"dependencies": {
15-
"@coreui/coreui": "^2.0.0",
15+
"@coreui/coreui": "^2.0.1",
1616
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
1717
"@coreui/icons": "^0.1.1",
1818
"@coreui/react": "^2.0.0-rc.1",
@@ -28,6 +28,7 @@
2828
"react": "^16.3.2",
2929
"react-chartjs-2": "^2.7.2",
3030
"react-dom": "^16.3.2",
31+
"react-loadable": "^5.4.0",
3132
"react-router-config": "^1.0.0-beta.4",
3233
"react-router-dom": "^4.2.2",
3334
"react-test-renderer": "^16.3.2",

‎src/routes.js

+174-36
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,178 @@
1-
import {
2-
Alerts,
3-
Badges,
4-
Breadcrumbs,
5-
ButtonDropdowns,
6-
ButtonGroups,
7-
Buttons,
8-
Cards,
9-
Carousels,
10-
Charts,
11-
Collapses,
12-
Colors,
13-
CoreUIIcons,
14-
Dashboard,
15-
Dropdowns,
16-
Flags,
17-
FontAwesome,
18-
Forms,
19-
Jumbotrons,
20-
ListGroups,
21-
Modals,
22-
Navbars,
23-
Navs,
24-
Paginations,
25-
Popovers,
26-
ProgressBar,
27-
SimpleLineIcons,
28-
BrandButtons,
29-
Switches,
30-
Tables,
31-
Tabs,
32-
Tooltips,
33-
Typography,
34-
Widgets,
35-
} from './views';
1+
import React from 'react';
2+
import Loadable from 'react-loadable'
3+
364
import DefaultLayout from './containers/DefaultLayout';
375

6+
function Loading() {
7+
return <div>Loading...</div>;
8+
}
9+
10+
const Breadcrumbs = Loadable({
11+
loader: () => import('./views/Base/Breadcrumbs'),
12+
loading: Loading,
13+
});
14+
15+
const Cards = Loadable({
16+
loader: () => import('./views/Base/Cards'),
17+
loading: Loading,
18+
});
19+
20+
const Carousels = Loadable({
21+
loader: () => import('./views/Base/Carousels'),
22+
loading: Loading,
23+
});
24+
25+
const Collapses = Loadable({
26+
loader: () => import('./views/Base/Collapses'),
27+
loading: Loading,
28+
});
29+
30+
const Dropdowns = Loadable({
31+
loader: () => import('./views/Base/Dropdowns'),
32+
loading: Loading,
33+
});
34+
35+
const Forms = Loadable({
36+
loader: () => import('./views/Base/Forms'),
37+
loading: Loading,
38+
});
39+
40+
const Jumbotrons = Loadable({
41+
loader: () => import('./views/Base/Jumbotrons'),
42+
loading: Loading,
43+
});
44+
45+
const ListGroups = Loadable({
46+
loader: () => import('./views/Base/ListGroups'),
47+
loading: Loading,
48+
});
49+
50+
const Navbars = Loadable({
51+
loader: () => import('./views/Base/Navbars'),
52+
loading: Loading,
53+
});
54+
55+
const Navs = Loadable({
56+
loader: () => import('./views/Base/Navs'),
57+
loading: Loading,
58+
});
59+
60+
const Paginations = Loadable({
61+
loader: () => import('./views/Base/Paginations'),
62+
loading: Loading,
63+
});
64+
65+
const Popovers = Loadable({
66+
loader: () => import('./views/Base/Popovers'),
67+
loading: Loading,
68+
});
69+
70+
const ProgressBar = Loadable({
71+
loader: () => import('./views/Base/ProgressBar'),
72+
loading: Loading,
73+
});
74+
75+
const Switches = Loadable({
76+
loader: () => import('./views/Base/Switches'),
77+
loading: Loading,
78+
});
79+
80+
const Tables = Loadable({
81+
loader: () => import('./views/Base/Tables'),
82+
loading: Loading,
83+
});
84+
85+
const Tabs = Loadable({
86+
loader: () => import('./views/Base/Tabs'),
87+
loading: Loading,
88+
});
89+
90+
const Tooltips = Loadable({
91+
loader: () => import('./views/Base/Tooltips'),
92+
loading: Loading,
93+
});
94+
95+
const BrandButtons = Loadable({
96+
loader: () => import('./views/Buttons/BrandButtons'),
97+
loading: Loading,
98+
});
99+
100+
const ButtonDropdowns = Loadable({
101+
loader: () => import('./views/Buttons/ButtonDropdowns'),
102+
loading: Loading,
103+
});
104+
105+
const ButtonGroups = Loadable({
106+
loader: () => import('./views/Buttons/ButtonGroups'),
107+
loading: Loading,
108+
});
109+
110+
const Buttons = Loadable({
111+
loader: () => import('./views/Buttons/Buttons'),
112+
loading: Loading,
113+
});
114+
115+
const Charts = Loadable({
116+
loader: () => import('./views/Charts'),
117+
loading: Loading,
118+
});
119+
120+
const Dashboard = Loadable({
121+
loader: () => import('./views/Dashboard'),
122+
loading: Loading,
123+
});
124+
125+
const CoreUIIcons = Loadable({
126+
loader: () => import('./views/Icons/CoreUIIcons'),
127+
loading: Loading,
128+
});
129+
130+
const Flags = Loadable({
131+
loader: () => import('./views/Icons/Flags'),
132+
loading: Loading,
133+
});
134+
135+
const FontAwesome = Loadable({
136+
loader: () => import('./views/Icons/FontAwesome'),
137+
loading: Loading,
138+
});
139+
140+
const SimpleLineIcons = Loadable({
141+
loader: () => import('./views/Icons/FontAwesome'),
142+
loading: Loading,
143+
});
144+
145+
const Alerts = Loadable({
146+
loader: () => import('./views/Notifications/Alerts'),
147+
loading: Loading,
148+
});
149+
150+
const Badges = Loadable({
151+
loader: () => import('./views/Notifications/Badges'),
152+
loading: Loading,
153+
});
154+
155+
const Modals = Loadable({
156+
loader: () => import('./views/Notifications/Modals'),
157+
loading: Loading,
158+
});
159+
160+
const Colors = Loadable({
161+
loader: () => import('./views/Theme/Colors'),
162+
loading: Loading,
163+
});
164+
165+
const Typography = Loadable({
166+
loader: () => import('./views/Theme/Typography'),
167+
loading: Loading,
168+
});
169+
170+
const Widgets = Loadable({
171+
loader: () => import('./views/Widgets/Widgets'),
172+
loading: Loading,
173+
});
174+
175+
38176
// https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
39177
const routes = [
40178
{ path: '/', exact: true, name: 'Home', component: DefaultLayout },
@@ -65,7 +203,7 @@ const routes = [
65203
{ path: '/buttons/button-dropdowns', name: 'Button Dropdowns', component: ButtonDropdowns },
66204
{ path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups },
67205
{ path: '/buttons/brand-buttons', name: 'Brand Buttons', component: BrandButtons },
68-
{ path: '/icons', exact: true, name: 'Icons', component: Flags },
206+
{ path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons },
69207
{ path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons },
70208
{ path: '/icons/flags', name: 'Flags', component: Flags },
71209
{ path: '/icons/font-awesome', name: 'Font Awesome', component: FontAwesome },

‎src/scss/style.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@charset "UTF-8";
22
/*!
33
* CoreUI - Open Source Dashboard UI Kit
4-
* @version v2.0.0
4+
* @version v2.0.1
55
* @link https://coreui.io
66
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
77
* Licensed under MIT (https://coreui.io/license)

‎src/views/Base/Switches/Switches.js

+36-37
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,42 @@ class Switches extends Component {
88
<div className="animated fadeIn">
99

1010
<Row>
11+
<Col xs="12" md="6">
12+
<Card>
13+
<CardHeader>
14+
Switch default
15+
</CardHeader>
16+
<CardBody>
17+
<AppSwitch className={'mx-1'} color={'primary'} checked />
18+
<AppSwitch className={'mx-1'} color={'secondary'} checked />
19+
<AppSwitch className={'mx-1'} color={'success'} checked />
20+
<AppSwitch className={'mx-1'} color={'warning'} checked />
21+
<AppSwitch className={'mx-1'} color={'info'} checked />
22+
<AppSwitch className={'mx-1'} color={'danger'} checked />
23+
<AppSwitch className={'mx-1'} color={'light'} checked />
24+
<AppSwitch className={'mx-1'} color={'dark'} checked />
25+
<AppSwitch className={'mx-1'} color={'primary'} disabled />
26+
</CardBody>
27+
</Card>
28+
</Col>
29+
<Col xs="12" md="6">
30+
<Card>
31+
<CardHeader>
32+
Switch pills
33+
</CardHeader>
34+
<CardBody>
35+
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} checked />
36+
<AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} checked />
37+
<AppSwitch className={'mx-1'} variant={'pill'} color={'success'} checked />
38+
<AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} checked />
39+
<AppSwitch className={'mx-1'} variant={'pill'} color={'info'} checked />
40+
<AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} checked />
41+
<AppSwitch className={'mx-1'} variant={'pill'} color={'light'} checked />
42+
<AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} checked />
43+
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} disabled />
44+
</CardBody>
45+
</Card>
46+
</Col>
1147
<Col xs="12" md="6">
1248
<Card>
1349
<CardHeader>
@@ -117,43 +153,6 @@ class Switches extends Component {
117153
</CardBody>
118154
</Card>
119155
</Col>
120-
<Col xs="12" md="6">
121-
<Card>
122-
<CardHeader>
123-
Switch default
124-
</CardHeader>
125-
<CardBody>
126-
<AppSwitch className={'mx-1'} color={'primary'} checked />
127-
<AppSwitch className={'mx-1'} color={'secondary'} checked />
128-
<AppSwitch className={'mx-1'} color={'success'} checked />
129-
<AppSwitch className={'mx-1'} color={'warning'} checked />
130-
<AppSwitch className={'mx-1'} color={'info'} checked />
131-
<AppSwitch className={'mx-1'} color={'danger'} checked />
132-
<AppSwitch className={'mx-1'} color={'light'} checked />
133-
<AppSwitch className={'mx-1'} color={'dark'} checked />
134-
<AppSwitch className={'mx-1'} color={'primary'} disabled />
135-
</CardBody>
136-
</Card>
137-
</Col>
138-
<Col xs="12" md="6">
139-
<Card>
140-
<CardHeader>
141-
Switch pills
142-
</CardHeader>
143-
<CardBody>
144-
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} checked />
145-
<AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} checked />
146-
<AppSwitch className={'mx-1'} variant={'pill'} color={'success'} checked />
147-
<AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} checked />
148-
<AppSwitch className={'mx-1'} variant={'pill'} color={'info'} checked />
149-
<AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} checked />
150-
<AppSwitch className={'mx-1'} variant={'pill'} color={'light'} checked />
151-
<AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} checked />
152-
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} disabled />
153-
</CardBody>
154-
</Card>
155-
</Col>
156-
157156
<Col xs="12" md="6">
158157
<Card>
159158
<CardHeader>

0 commit comments

Comments
 (0)