ui: improve initial assets load speed

harunurhan · harunurhan · commit abd26cd87254 · 2020-02-27T10:49:52.000+01:00
Does not split code into chunks, based on routes anymore. Since this
ends up a lot of dependencies duplicated in multiple bundles. Although
in theory this increases size of assets that need to be downloaded
to render a route, in practice, our preloading strategy does not work
as inteded so the browser ends up downloading most of the whole bundle
sometimes.

So for now admin route and submissions routes are async, others are
not. And there is no preloading as of now, but planned to be introduce
in the future.

(Also adds `yarn analyze` to see report for generated bundle by `yarn
build`)

INSPIR-3232
diff --git a/ui/package.json b/ui/package.json
@@ -6,7 +6,7 @@
   "bundlesize": [
     {
       "path": "./build/**/*.js",
-      "maxSize": "375 kB"
+      "maxSize": "900 kB"
     }
   ],
   "scripts": {
@@ -17,6 +17,7 @@
     "test:unit": "craco test",
     "test:unit:log": "craco test --verbose=false",
     "test:size": "bundlesize",
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
     "eject": "react-scripts eject",
     "lint":
       "./node_modules/eslint/bin/eslint.js ./src --ext .js,.jsx --config .eslintrc"
@@ -89,6 +90,7 @@
     "react-test-renderer": "^16.2.0",
     "redux-logger": "^3.0.6",
     "redux-mock-store": "^1.5.1",
+    "source-map-explorer": "^2.3.1",
     "webpack-filter-warnings-plugin": "^1.2.1"
   },
   "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
diff --git a/ui/src/App.jsx b/ui/src/App.jsx
@@ -28,51 +28,26 @@ import {
 import UserFeedback from './common/components/UserFeedback';
 import { setUserCategoryFromRoles } from './tracker';
 import { fetchLoggedInUser } from './actions/user';
+import Home from './home';
+import Literature from './literature';
+import Conferences from './conferences';
+import Authors from './authors';
+import Jobs from './jobs';
+import User from './user';
+import Errors from './errors';
 
 const Holdingpen$ = Loadable({
   loader: () => import('./holdingpen'),
   loading: Loading,
 });
-const Literature$ = Loadable({
-  loader: () => import('./literature'),
-  loading: Loading,
-});
-const Authors$ = Loadable({
-  loader: () => import('./authors'),
-  loading: Loading,
-});
-const Jobs$ = Loadable({
-  loader: () => import('./jobs'),
-  loading: Loading,
-});
-const Conferences$ = Loadable({
-  loader: () => import('./conferences'),
-  loading: Loading,
-});
-const Home$ = Loadable({
-  loader: () => import('./home'),
-  loading: Loading,
-});
-const User$ = Loadable({
-  loader: () => import('./user'),
-  loading: Loading,
-});
 const Submissions$ = Loadable({
   loader: () => import('./submissions'),
   loading: Loading,
 });
-const Errors$ = Loadable({
-  loader: () => import('./errors'),
-  loading: Loading,
-});
 
 function App({ userRoles, dispatch }) {
   const [headerHeight, setHeaderHeight] = useState(0);
 
-  useEffect(() => {
-    Loadable.preloadAll();
-  }, []);
-
   useEffect(
     () => {
       dispatch(fetchLoggedInUser());
@@ -92,15 +67,15 @@ function App({ userRoles, dispatch }) {
       <Header onHeightChange={setHeaderHeight} />
       <Layout.Content className="content" style={{ marginTop: headerHeight }}>
         <SafeSwitch id="main">
-          <Route exact path={HOME} component={Home$} />
-          <Route path={USER} component={User$} />
+          <Route exact path={HOME} component={Home} />
+          <Route path={USER} component={User} />
           <PrivateRoute path={HOLDINGPEN} component={Holdingpen$} />
-          <Route path={LITERATURE} component={Literature$} />
-          <Route path={AUTHORS} component={Authors$} />
-          <Route path={JOBS} component={Jobs$} />
-          <Route path={CONFERENCES} component={Conferences$} />
+          <Route path={LITERATURE} component={Literature} />
+          <Route path={AUTHORS} component={Authors} />
+          <Route path={JOBS} component={Jobs} />
+          <Route path={CONFERENCES} component={Conferences} />
           <PrivateRoute path={SUBMISSIONS} component={Submissions$} />
-          <Route path={ERRORS} component={Errors$} />
+          <Route path={ERRORS} component={Errors} />
         </SafeSwitch>
         <UserFeedback />
       </Layout.Content>
diff --git a/ui/src/__tests__/App.test.jsx b/ui/src/__tests__/App.test.jsx
@@ -3,6 +3,7 @@ import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { mount } from 'enzyme';
 import { fromJS, List } from 'immutable';
+import Loadable from 'react-loadable';
 
 import { getStore, getStoreWithState } from '../fixtures/store';
 import App from '../App';
@@ -63,7 +64,7 @@ describe('App', () => {
     expect(store.getActions()).toEqual(expectedActions);
   });
 
-  it('navigates to Holdingpen when /holdingpen if logged in', () => {
+  it('navigates to Holdingpen when /holdingpen if logged in', async () => {
     const store = getStoreWithState({
       user: fromJS({
         loggedIn: true,
@@ -79,10 +80,12 @@ describe('App', () => {
         </MemoryRouter>
       </Provider>
     );
+    await Loadable.preloadAll();
+    wrapper.update();
     expect(wrapper.find(Holdingpen)).toExist();
   });
 
-  it('does not navigate to Holdingpen when /holdingpen if not logged in', () => {
+  it('does not navigate to Holdingpen when /holdingpen if not logged in', async () => {
     const store = getStoreWithState({
       user: fromJS({
         loggedIn: false,
@@ -98,6 +101,8 @@ describe('App', () => {
         </MemoryRouter>
       </Provider>
     );
+    await Loadable.preloadAll();
+    wrapper.update();
     expect(wrapper.find(Holdingpen)).not.toExist();
   });
 
@@ -145,7 +150,7 @@ describe('App', () => {
     expect(wrapper.find(Conferences)).toExist();
   });
 
-  it('navigates to Submissions when /submissions if logged in', () => {
+  it('navigates to Submissions when /submissions if logged in', async () => {
     const store = getStoreWithState({
       user: fromJS({
         loggedIn: true,
@@ -161,10 +166,12 @@ describe('App', () => {
         </MemoryRouter>
       </Provider>
     );
+    await Loadable.preloadAll();
+    wrapper.update();
     expect(wrapper.find(Submissions)).toExist();
   });
 
-  it('navigates to Submissions when /submissions if not logged in', () => {
+  it('navigates to Submissions when /submissions if not logged in', async () => {
     const store = getStoreWithState({
       user: fromJS({
         loggedIn: false,
@@ -180,6 +187,8 @@ describe('App', () => {
         </MemoryRouter>
       </Provider>
     );
+    await Loadable.preloadAll();
+    wrapper.update();
     expect(wrapper.find(Submissions)).not.toExist();
   });
 
diff --git a/ui/src/authors/index.jsx b/ui/src/authors/index.jsx
@@ -1,26 +1,17 @@
 import React, { Component } from 'react';
 import { Route } from 'react-router-dom';
-import Loadable from 'react-loadable';
 
 import { AUTHORS } from '../common/routes';
-import Loading from '../common/components/Loading';
 import './index.scss';
-
-const SearchPage$ = Loadable({
-  loader: () => import('./containers/SearchPageContainer'),
-  loading: Loading,
-});
-const DetailPage$ = Loadable({
-  loader: () => import('./containers/DetailPageContainer'),
-  loading: Loading,
-});
+import SearchPageContainer from './containers/SearchPageContainer';
+import DetailPageContainer from './containers/DetailPageContainer';
 
 class Authors extends Component {
   render() {
     return (
       <div className="__Authors__">
-        <Route exact path={AUTHORS} component={SearchPage$} />
-        <Route exact path={`${AUTHORS}/:id`} component={DetailPage$} />
+        <Route exact path={AUTHORS} component={SearchPageContainer} />
+        <Route exact path={`${AUTHORS}/:id`} component={DetailPageContainer} />
       </div>
     );
   }
diff --git a/ui/src/common/VerticalDivider/VerticalDivider.scss b/ui/src/common/VerticalDivider/VerticalDivider.scss
@@ -1,4 +1,4 @@
 .__VerticalDivider__ {
-  background: $text-color;
-  margin-left: $padding-md - 1px;
+  background: $text-color !important;
+  margin-left: $padding-md - 1px !important;
 }
diff --git a/ui/src/conferences/index.jsx b/ui/src/conferences/index.jsx
@@ -1,25 +1,21 @@
 import React, { Component } from 'react';
 import { Route } from 'react-router-dom';
-import Loadable from 'react-loadable';
 
 import { CONFERENCES } from '../common/routes';
-import Loading from '../common/components/Loading';
 
-const SearchPage$ = Loadable({
-  loader: () => import('./containers/SearchPageContainer'),
-  loading: Loading,
-});
-const DetailPage$ = Loadable({
-  loader: () => import('./containers/DetailPageContainer'),
-  loading: Loading,
-});
+import SearchPageContainer from './containers/SearchPageContainer';
+import DetailPageContainer from './containers/DetailPageContainer';
 
 class Conferences extends Component {
   render() {
     return (
       <div className="w-100">
-        <Route exact path={CONFERENCES} component={SearchPage$} />
-        <Route exact path={`${CONFERENCES}/:id`} component={DetailPage$} />
+        <Route exact path={CONFERENCES} component={SearchPageContainer} />
+        <Route
+          exact
+          path={`${CONFERENCES}/:id`}
+          component={DetailPageContainer}
+        />
       </div>
     );
   }
diff --git a/ui/src/jobs/index.jsx b/ui/src/jobs/index.jsx
@@ -1,26 +1,17 @@
 import React, { Component } from 'react';
 import { Route } from 'react-router-dom';
-import Loadable from 'react-loadable';
 
 import { JOBS } from '../common/routes';
-import Loading from '../common/components/Loading';
 import './index.scss';
-
-const SearchPage$ = Loadable({
-  loader: () => import('./containers/SearchPageContainer'),
-  loading: Loading,
-});
-const DetailPage$ = Loadable({
-  loader: () => import('./containers/DetailPageContainer'),
-  loading: Loading,
-});
+import SearchPageContainer from './containers/SearchPageContainer';
+import DetailPageContainer from './containers/DetailPageContainer';
 
 class Jobs extends Component {
   render() {
     return (
       <div className="__Jobs__">
-        <Route exact path={JOBS} component={SearchPage$} />
-        <Route exact path={`${JOBS}/:id`} component={DetailPage$} />
+        <Route exact path={JOBS} component={SearchPageContainer} />
+        <Route exact path={`${JOBS}/:id`} component={DetailPageContainer} />
       </div>
     );
   }
diff --git a/ui/src/literature/index.jsx b/ui/src/literature/index.jsx
@@ -1,26 +1,21 @@
 import React, { Component } from 'react';
 import { Route } from 'react-router-dom';
-import Loadable from 'react-loadable';
 
-import Loading from '../common/components/Loading';
 import './index.scss';
 import { LITERATURE } from '../common/routes';
-
-const SearchPage$ = Loadable({
-  loader: () => import('./containers/SearchPage'),
-  loading: Loading,
-});
-const DetailPage$ = Loadable({
-  loader: () => import('./containers/DetailPageContainer'),
-  loading: Loading,
-});
+import SearchPage from './containers/SearchPage';
+import DetailPageContainer from './containers/DetailPageContainer';
 
 class Literature extends Component {
   render() {
     return (
       <div className="__Literature__">
-        <Route exact path={LITERATURE} component={SearchPage$} />
-        <Route exact path={`${LITERATURE}/:id`} component={DetailPage$} />
+        <Route exact path={LITERATURE} component={SearchPage} />
+        <Route
+          exact
+          path={`${LITERATURE}/:id`}
+          component={DetailPageContainer}
+        />
       </div>
     );
   }
diff --git a/ui/src/submissions/index.jsx b/ui/src/submissions/index.jsx
diff --git a/ui/yarn.lock b/ui/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`	`1`	`.__VerticalDivider__ {`
`2`		`- background: $text-color;`
`3`		`- margin-left: $padding-md - 1px;`
	`2`	`+ background: $text-color !important;`
	`3`	`+ margin-left: $padding-md - 1px !important;`
`4`	`4`	`}`