Skip to content

Commit 8b29db9

Browse files
alichherawallaalichherawalla
authored
Merge pull request #170 from wednesday-solutions/feat/reduce-bundlesize
feat: reduce bundle size
2 parents 1cb7cb3 + 4a37cc4 commit 8b29db9

11 files changed

Lines changed: 125 additions & 89 deletions

File tree

‎app/.nginx.conf‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,4 +109,11 @@ server {
109109
#
110110
# }
111111

112+
# Enable Brotli Compression
113+
# brotli on;
114+
# brotli_static on;
115+
# brotli_comp_level 9; # You can change this from 1–11. 4–9 offers good performance balance.
116+
# brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;
117+
118+
112119
}

‎app/app.js‎

Lines changed: 2 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -9,42 +9,23 @@
99
// Import all the third party stuff
1010
import React, { StrictMode } from 'react';
1111
import { createRoot } from 'react-dom/client';
12-
import { Router } from 'react-router-dom';
13-
import { Provider } from 'react-redux';
14-
import { PersistGate } from 'redux-persist/integration/react';
15-
import history from 'utils/history';
1612
import 'sanitize.css/sanitize.css';
1713

1814
// Import root app
1915
import App from 'containers/App/Loadable';
2016

21-
// Import Language Provider
22-
import ScrollToTop from 'components/ScrollToTop';
2317
// Load the favicon and the .htaccess file
2418
/* eslint-disable import/no-unresolved, import/extensions */
2519
import '!file-loader?name=[name].[ext]!./images/favicon.ico';
2620
import 'file-loader?name=.htaccess!./.htaccess';
2721
/* eslint-enable import/no-unresolved, import/extensions */
2822

29-
import configureStore from './configureStore';
30-
31-
// Create redux store with history
32-
const initialState = {};
33-
const { store, persistor } = configureStore(initialState, history);
3423
const container = document.getElementById('app');
3524
const root = createRoot(container);
3625
const render = (messages) => {
3726
root.render(
3827
<StrictMode>
39-
<Provider store={store}>
40-
<PersistGate loading={null} persistor={persistor}>
41-
<Router history={history}>
42-
<ScrollToTop>
43-
<App />
44-
</ScrollToTop>
45-
</Router>
46-
</PersistGate>
47-
</Provider>
28+
<App />
4829
</StrictMode>
4930
);
5031
};
@@ -58,17 +39,7 @@ if (module.hot) {
5839
});
5940
}
6041

61-
// Chunked polyfill for browsers without Intl support
62-
if (!window.Intl) {
63-
Promise.resolve(import('intl'))
64-
.then(() => Promise.all([import('intl/locale-data/jsonp/en.js')]))
65-
.then(() => render())
66-
.catch((err) => {
67-
throw err;
68-
});
69-
} else {
70-
render();
71-
}
42+
render();
7243

7344
// Install ServiceWorker and AppCache in the end since
7445
// it's not most important operation and if main code fails,

‎app/components/Header/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ const StyledHeader = styled(Layout.Header)`
2323
}
2424
`;
2525
const Logo = styled.img`
26-
height: 5rem;
27-
width: auto;
26+
height: ${(props) => props.height};
27+
width: ${(props) => props.height};
2828
margin-top: 1rem;
2929
`;
3030
const Title = styled(T)`
@@ -38,7 +38,7 @@ const Title = styled(T)`
3838
function Header(props) {
3939
return (
4040
<StyledHeader {...props} data-testid="header">
41-
<Logo alt="logo" src={logo} />
41+
<Logo alt="logo" src={logo} width="auto" height="5rem" />
4242
<Title type="heading" id="wednesday_solutions" />
4343
</StyledHeader>
4444
);

‎app/components/Header/tests/__snapshots__/index.test.js.snap‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,10 @@ exports[`<Header /> should render and match the snapshot 1`] = `
1010
>
1111
<img
1212
alt="logo"
13-
class="Header__Logo-wp2jxc-1 exNzgN"
13+
class="Header__Logo-wp2jxc-1 kLDLQt"
14+
height="5rem"
1415
src="IMAGE_MOCK"
16+
width="auto"
1517
/>
1618
<p
1719
class="T__StyledText-gjlic1-0 guBozt Header__Title-wp2jxc-2 OSRax"

‎app/components/RepoCard/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import styled from 'styled-components';
1010
import { Card } from 'antd';
1111
import T from '@components/T';
1212
import If from '@components/If';
13-
import { isEmpty } from 'lodash';
13+
import isEmpty from 'lodash/isEmpty';
1414

1515
const CustomCard = styled(Card)`
1616
&& {

‎app/containers/App/index.js‎

Lines changed: 60 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,72 +7,92 @@
77
*
88
*/
99

10-
import React, { useEffect } from 'react';
10+
import React, { useEffect, useState } from 'react';
1111
import { Switch, Route } from 'react-router-dom';
1212
import PropTypes from 'prop-types';
13-
import { withRouter } from 'react-router';
13+
import { Router } from 'react-router';
1414
import map from 'lodash/map';
15-
import { compose } from 'redux';
1615
import { Layout } from 'antd';
16+
import { PersistGate } from 'redux-persist/integration/react';
1717
import { routeConfig } from '@app/routeConfig';
1818
import { ThemeProvider } from 'styled-components';
1919
import GlobalStyle from '@app/global-styles';
2020
import { colors } from '@themes';
2121
import Header from '@components/Header';
22+
import ScrollToTop from '@components/ScrollToTop';
2223
import For from '@components/For';
2324
import LanguageProvider from 'containers/LanguageProvider';
2425
import ErrorBoundary from '@app/components/ErrorBoundary/index';
2526
import { translationMessages } from '@app/i18n';
27+
import { Provider } from 'react-redux';
28+
import history from '@utils/history'
29+
import configureStore from '@app/configureStore';
30+
import If from '@app/components/If/index';
2631

2732
const theme = {
2833
fg: colors.primary,
2934
bg: colors.secondary
3035
};
3136

32-
export function App({ location, history }) {
37+
export function App({ location }) {
38+
const [store, setStore] = useState(null);
39+
const [persistor, setPersistor] = useState(null);
3340
useEffect(() => {
34-
if (location.search.includes('?redirect_uri=')) {
35-
const routeToReplace = new URLSearchParams(location.search).get('redirect_uri');
36-
history.replace(routeToReplace);
37-
}
41+
// if (location.search.includes('?redirect_uri=')) {
42+
// const routeToReplace = new URLSearchParams(location.search).get('redirect_uri');
43+
// history.replace(routeToReplace);
44+
// }
45+
const { store: s, persistor } = configureStore({}, history);
46+
setStore(s);
47+
setPersistor(persistor);
3848
}, []);
3949

4050
return (
41-
<ErrorBoundary>
42-
<LanguageProvider messages={translationMessages}>
43-
<ThemeProvider theme={theme}>
44-
<Header />
45-
<Layout.Content>
46-
<For
47-
ParentComponent={(props) => <Switch {...props} />}
48-
of={map(Object.keys(routeConfig))}
49-
renderItem={(routeKey, index) => {
50-
const Component = routeConfig[routeKey].component;
51-
return (
52-
<Route
53-
exact={routeConfig[routeKey].exact}
54-
key={index}
55-
path={routeConfig[routeKey].route}
56-
render={(props) => {
57-
const updatedProps = {
58-
...props,
59-
...routeConfig[routeKey].props
60-
};
61-
return <Component {...updatedProps} />;
62-
}}
63-
/>
64-
);
65-
}}
66-
/>
67-
<GlobalStyle />
68-
</Layout.Content>
69-
</ThemeProvider>
70-
</LanguageProvider>
71-
</ErrorBoundary>
51+
<If condition={!!persistor} otherwise={<div>LOADING</div>}>
52+
<PersistGate loading={null} persistor={persistor}>
53+
<Router history={history}>
54+
<ScrollToTop>
55+
<ErrorBoundary>
56+
<Provider store={store}>
57+
<LanguageProvider messages={translationMessages}>
58+
<ThemeProvider theme={theme}>
59+
<Header />
60+
<Layout.Content>
61+
<For
62+
ParentComponent={(props) => <Switch {...props} />}
63+
of={map(Object.keys(routeConfig))}
64+
renderItem={(routeKey, index) => {
65+
const Component = routeConfig[routeKey].component;
66+
return (
67+
<Route
68+
exact={routeConfig[routeKey].exact}
69+
key={index}
70+
path={routeConfig[routeKey].route}
71+
render={(props) => {
72+
const updatedProps = {
73+
...props,
74+
...routeConfig[routeKey].props
75+
};
76+
return <Component {...updatedProps} />;
77+
}}
78+
/>
79+
);
80+
}}
81+
/>
82+
<GlobalStyle />
83+
</Layout.Content>
84+
</ThemeProvider>
85+
</LanguageProvider>
86+
</Provider>
87+
</ErrorBoundary>
88+
</ScrollToTop>
89+
</Router>
90+
</PersistGate>
91+
</If>
7292
);
7393
}
7494
App.propTypes = {
7595
location: PropTypes.object,
7696
history: PropTypes.object
7797
};
78-
export default compose(withRouter)(App);
98+
export default App;

‎app/containers/App/tests/__snapshots__/index.test.js.snap‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@ exports[`<App /> container tests should render and match the snapshot 1`] = `
99
>
1010
<img
1111
alt="logo"
12-
class="Header__Logo-wp2jxc-1 exNzgN"
12+
class="Header__Logo-wp2jxc-1 kLDLQt"
13+
height="5rem"
1314
src="IMAGE_MOCK"
15+
width="auto"
1416
/>
1517
<p
1618
class="T__StyledText-gjlic1-0 guBozt Header__Title-wp2jxc-2 OSRax"

‎babel.config.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,25 @@ module.exports = {
1919
'@babel/plugin-syntax-optional-chaining',
2020
'styled-components',
2121
'@babel/plugin-proposal-class-properties',
22-
'@babel/plugin-syntax-dynamic-import'
22+
'@babel/plugin-syntax-dynamic-import',
23+
'@babel/plugin-transform-runtime' // Reduces code duplication
2324
],
2425
env: {
2526
production: {
2627
only: ['app'],
2728
plugins: [
2829
'lodash',
29-
'transform-react-remove-prop-types',
30+
[
31+
'transform-react-remove-prop-types',
32+
{
33+
// Removes the import statements for React propTypes
34+
removeImport: true
35+
}
36+
],
3037
'@babel/plugin-transform-react-inline-elements',
3138
'@babel/plugin-transform-react-constant-elements',
32-
['import', { libraryName: 'antd', style: true }, 'import-antd']
39+
['import', { libraryName: 'antd', style: true }, 'import-antd'],
40+
['import', { libraryName: 'lodash' }, 'import-lodash']
3341
]
3442
},
3543
dev: {

‎internals/webpack/webpack.config.prod.js‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,26 @@ module.exports = require('./webpack.config.base')({
2323

2424
optimization: {
2525
minimize: true,
26+
minimizer: [
27+
(compiler) => {
28+
const TerserPlugin = require('terser-webpack-plugin');
29+
new TerserPlugin({
30+
terserOptions: {
31+
warnings: false,
32+
compress: {
33+
comparisons: false
34+
},
35+
parse: {},
36+
mangle: true,
37+
output: {
38+
comments: false,
39+
ascii_only: true
40+
}
41+
},
42+
parallel: true
43+
}).apply(compiler);
44+
}
45+
],
2646
nodeEnv: 'production',
2747
sideEffects: false,
2848
concatenateModules: true,
@@ -56,8 +76,8 @@ module.exports = require('./webpack.config.base')({
5676
removeStyleLinkTypeAttributes: true,
5777
keepClosingSlash: true,
5878
minifyJS: true,
59-
minifyCSS: true
60-
// minifyURLs: true
79+
minifyCSS: true,
80+
minifyURLs: true
6181
},
6282
inject: true
6383
}),
@@ -123,7 +143,6 @@ module.exports = require('./webpack.config.base')({
123143
generateStatsFile: true
124144
})
125145
],
126-
devtool: 'source-map',
127146
performance: {
128147
assetFilter: (assetFilename) => !/(\.map$)|(^(main\.|favicon\.))/.test(assetFilename)
129148
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,6 @@
9595
"history": "4.9.x",
9696
"immer": "9.0.3",
9797
"immutable": "^4.2.1",
98-
"intl": "1.2.5",
9998
"invariant": "2.2.4",
10099
"ip": "1.1.5",
101100
"less": "^4.1.1",
@@ -130,6 +129,7 @@
130129
"@babel/plugin-transform-modules-commonjs": "7.14.5",
131130
"@babel/plugin-transform-react-constant-elements": "7.14.5",
132131
"@babel/plugin-transform-react-inline-elements": "7.14.5",
132+
"@babel/plugin-transform-runtime": "^7.19.6",
133133
"@babel/preset-env": "^7.14.7",
134134
"@babel/preset-react": "^7.14.5",
135135
"@babel/register": "7.14.5",

0 commit comments

Comments
 (0)