Skip to content

Commit 162d78c

Browse files
JBWatenbergScalityJBWatenbergScality
committed
UI : Split webpack bundle into smaller chunks by lazy loading routes components
New bundles size are as followed : 571.11 KB build/static/js/4.25b92d7b.chunk.js 36.11 KB build/static/js/15.8684c3a2.chunk.js 30 KB build/static/js/main.20da19d4.chunk.js 19.76 KB build/static/js/1.c5d9f7f7.chunk.js 12.88 KB build/static/css/4.023dbf36.chunk.css 9.85 KB build/static/js/12.e6067137.chunk.js 6.91 KB build/static/js/14.3bd7ce01.chunk.js 5.62 KB build/static/js/0.69f7df4d.chunk.js 2.65 KB build/static/js/6.8d8d1636.chunk.js 2.28 KB build/static/js/7.06fb1003.chunk.js 1.99 KB build/static/js/5.c144a469.chunk.js 1.7 KB build/static/js/10.39e394e2.chunk.js 1.3 KB build/static/js/runtime-main.33ce3b79.js 1.2 KB build/static/js/11.e2755908.chunk.js 1009 B build/static/js/9.a5906d8a.chunk.js 489 B build/static/js/8.5381719b.chunk.js 441 B build/static/css/main.9707ba81.chunk.css 329 B build/static/js/13.dc12452d.chunk.js We should investigate in bundling core ui in chunks per components to go further because for now all core-ui components are bundled in metalk8s ui even if they are not used. Refs: #3124
1 parent d8b6d58 commit 162d78c

File tree

5 files changed

+114
-57
lines changed

5 files changed

+114
-57
lines changed

‎ui/config-overrides.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const {
44
useEslintRc,
55
addWebpackPlugin,
66
} = require('customize-cra');
7+
const webpack = require('webpack')
78
const CompressionPlugin = require('compression-webpack-plugin');
89

910
/**
@@ -27,9 +28,25 @@ const setWebpackPerformance = () => (config) => {
2728
return config;
2829
};
2930

31+
const setNullModuleForOidcClient = () => (config) => {
32+
config.module = {
33+
...config.module,
34+
rules: [
35+
...config.module.rules,
36+
{
37+
test: /oidc-client/,
38+
use: 'null-loader',
39+
},
40+
],
41+
}
42+
43+
return config;
44+
}
45+
3046
module.exports = override(
3147
useBabelRc(),
3248
useEslintRc(),
49+
setNullModuleForOidcClient(),// We only use oidc-client for type definitions
3350
addWebpackPlugin(new CompressionPlugin()),
3451
setWebpackPerformance(),
3552
);

‎ui/package-lock.json‎

Lines changed: 34 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,10 +90,11 @@
9090
"flow-bin": "^0.107.0",
9191
"jest-junit": "^7.0.0",
9292
"msw": "^0.25.0",
93+
"null-loader": "^4.0.1",
94+
"oidc-client": "^1.8.0",
9395
"react-app-rewired": "^2.1.3",
9496
"react-test-renderer": "^17.0.1",
95-
"source-map-explorer": "^2.0.1",
96-
"oidc-client": "^1.8.0"
97+
"source-map-explorer": "^2.0.1"
9798
},
9899
"cypress-cucumber-preprocessor": {
99100
"nonGlobalStepDefinitions": true,

‎ui/src/containers/Layout.js‎

Lines changed: 57 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,27 @@ import { ThemeProvider } from 'styled-components';
44
import { useRouteMatch, useHistory } from 'react-router';
55
import { Switch } from 'react-router-dom';
66
import { Layout as CoreUILayout, Notifications } from '@scality/core-ui';
7-
87
import { intl } from '../translations/IntlGlobalProvider';
9-
import NodeCreateForm from './NodeCreateForm';
10-
import NodePage from './NodePage';
11-
import SolutionList from './SolutionList';
12-
import EnvironmentCreationForm from './EnvironmentCreationForm';
13-
import NodeDeployment from './NodeDeployment';
14-
import ClusterMonitoring from './ClusterMonitoring';
15-
import About from './About';
16-
import PrivateRoute from './PrivateRoute';
17-
import SolutionDetail from './SolutionDetail';
18-
import VolumePage from './VolumePage';
19-
208
import { toggleSideBarAction } from '../ducks/app/layout';
21-
229
import { removeNotificationAction } from '../ducks/app/notifications';
2310
import CreateVolume from './CreateVolume';
2411
import { fetchClusterVersionAction } from '../ducks/app/nodes';
2512
import { Navbar } from '../components/Navbar';
13+
import Loader from '../components/Loader';
14+
import { Suspense } from 'react';
15+
16+
const NodeCreateForm = React.lazy(() => import('./NodeCreateForm'));
17+
const NodePage = React.lazy(() => import('./NodePage'));
18+
const SolutionList = React.lazy(() => import('./SolutionList'));
19+
const EnvironmentCreationForm = React.lazy(() =>
20+
import('./EnvironmentCreationForm'),
21+
);
22+
const NodeDeployment = React.lazy(() => import('./NodeDeployment'));
23+
const ClusterMonitoring = React.lazy(() => import('./ClusterMonitoring'));
24+
const About = React.lazy(() => import('./About'));
25+
const PrivateRoute = React.lazy(() => import('./PrivateRoute'));
26+
const SolutionDetail = React.lazy(() => import('./SolutionDetail'));
27+
const VolumePage = React.lazy(() => import('./VolumePage'));
2628

2729
const Layout = (props) => {
2830
const sidebar = useSelector((state) => state.app.layout.sidebar);
@@ -101,43 +103,52 @@ const Layout = (props) => {
101103

102104
return (
103105
<ThemeProvider theme={theme}>
104-
<CoreUILayout sidebar={isUserLoaded && sidebarConfig} navbarElement={<Navbar />}>
106+
<CoreUILayout
107+
sidebar={isUserLoaded && sidebarConfig}
108+
navbarElement={<Navbar />}
109+
>
105110
<Notifications
106111
notifications={notifications}
107112
onDismiss={removeNotification}
108113
/>
109-
<Switch>
110-
<PrivateRoute exact path="/nodes/create" component={NodeCreateForm} />
111-
<PrivateRoute
112-
exact
113-
path="/nodes/:id/deploy"
114-
component={NodeDeployment}
115-
/>
116-
<PrivateRoute
117-
path={`/nodes/:id/createVolume`}
118-
component={CreateVolume}
119-
/>
120-
<PrivateRoute
121-
exact
122-
path="/volumes/createVolume"
123-
component={CreateVolume}
124-
/>
125-
<PrivateRoute path="/nodes" component={NodePage} />
126-
<PrivateRoute exact path="/environments" component={SolutionList} />
127-
<PrivateRoute path="/volumes/:name?" component={VolumePage} />
128-
<PrivateRoute
129-
exact
130-
path="/environments/create-environment"
131-
component={EnvironmentCreationForm}
132-
/>
133-
<PrivateRoute exact path="/about" component={About} />
134-
<PrivateRoute exact path="/" component={ClusterMonitoring} />
135-
<PrivateRoute
136-
exact
137-
path="/environments/:id"
138-
component={SolutionDetail}
139-
/>
140-
</Switch>
114+
<Suspense fallback={<Loader />}>
115+
<Switch>
116+
<PrivateRoute
117+
exact
118+
path="/nodes/create"
119+
component={NodeCreateForm}
120+
/>
121+
<PrivateRoute
122+
exact
123+
path="/nodes/:id/deploy"
124+
component={NodeDeployment}
125+
/>
126+
<PrivateRoute
127+
path={`/nodes/:id/createVolume`}
128+
component={CreateVolume}
129+
/>
130+
<PrivateRoute
131+
exact
132+
path="/volumes/createVolume"
133+
component={CreateVolume}
134+
/>
135+
<PrivateRoute path="/nodes" component={NodePage} />
136+
<PrivateRoute exact path="/environments" component={SolutionList} />
137+
<PrivateRoute path="/volumes/:name?" component={VolumePage} />
138+
<PrivateRoute
139+
exact
140+
path="/environments/create-environment"
141+
component={EnvironmentCreationForm}
142+
/>
143+
<PrivateRoute exact path="/about" component={About} />
144+
<PrivateRoute exact path="/" component={ClusterMonitoring} />
145+
<PrivateRoute
146+
exact
147+
path="/environments/:id"
148+
component={SolutionDetail}
149+
/>
150+
</Switch>
151+
</Suspense>
141152
</CoreUILayout>
142153
</ThemeProvider>
143154
);

‎ui/src/containers/NodeInformation.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
makeGetVolumesFromUrl,
2121
useRefreshEffect,
2222
} from '../services/utils';
23-
import NodeVolumes from './NodeVolumes';
23+
const NodeVolumes = lazy(() => import('./NodeVolumes'));
2424
import {
2525
InformationListContainer,
2626
InformationSpan,
@@ -215,6 +215,7 @@ const NodeInformation = (props) => {
215215
return (
216216
<NodeInformationContainer>
217217
<Tabs activeColor={theme.brand.secondary} items={items}>
218+
<Suspense fallback={<Loader />}>
218219
<Switch>
219220
<Route path={`${match.url}/pods`} component={NodePods} />
220221
<Route
@@ -225,6 +226,7 @@ const NodeInformation = (props) => {
225226
/>
226227
<Route path="/" component={NodeDetails} />
227228
</Switch>
229+
</Suspense>
228230
</Tabs>
229231
</NodeInformationContainer>
230232
);

0 commit comments

Comments
 (0)