build(webpack): code-split bundles and add content-hash to output files (#588) (#596)

* build(bundle): add contenth hash to chunks

* build(webpack): lazy load routes

* fix(suspense): move Suspense to approriate place

* build(webpack): prefetch bundles

* build(webpack): exclude css from prefetch groups

* build(webpack): exclude app and npm bundle

* build(webpack): only prefetch lazy-load custom modules

(cherry picked from commit ea89802)

Co-authored-by: Thuan Vo <[email protected]>

Author: mergify[bot]

package.json

@@ -25,7 +25,7 @@
     "prettier:check": "prettier --check './src/**/*.{tsx,ts}'",
     "prettier:apply": "prettier --write './src/**/*.{tsx,ts}'",
     "build:bundle-profile": "webpack --config webpack.prod.js --profile --json > stats.json",
-    "build:bundle-analyze": "webpack-bundle-analyzer ./stats.json",
+    "build:bundle-analyze": "webpack-bundle-analyzer ./stats.json dist",
     "build:bundle-profile-analyze": "npm-run-all -l build:bundle-profile build:bundle-analyze",
     "yarn:install": "yarn install",
     "yarn:frzinstall": "yarn install --frozen-lockfile"
@@ -43,6 +43,7 @@
     "@types/victory": "^33.1.5",
     "@typescript-eslint/eslint-plugin": "^4.32.0",
     "@typescript-eslint/parser": "^4.32.0",
+    "@vue/preload-webpack-plugin": "^2.0.0",
     "css-loader": "^5.2.6",
     "css-minimizer-webpack-plugin": "^4.0.0",
     "dotenv-webpack": "^7.1.0",

src/app/About/About.tsx

@@ -43,7 +43,9 @@ import { BreadcrumbPage } from '@app/BreadcrumbPage/BreadcrumbPage';
 import { AboutDescription, CRYOSTAT_TRADEMARK } from './AboutDescription';
 import { Brand, Card, CardBody, CardFooter, CardHeader } from '@patternfly/react-core';
 
-export const About = () => {
+export interface AboutProps {}
+
+export const About: React.FunctionComponent<AboutProps> = (props) => {
   return (
     <BreadcrumbPage pageTitle="About">
       <Card>
@@ -58,3 +60,5 @@ export const About = () => {
     </BreadcrumbPage>
   );
 };
+
+export default About;

src/app/Archives/Archives.tsx

@@ -62,7 +62,7 @@ export const uploadAsTarget: Target = {
 
 export interface ArchivesProps {}
 
-export const Archives: React.FunctionComponent<ArchivesProps> = () => {
+export const Archives: React.FunctionComponent<ArchivesProps> = (props) => {
   const context = React.useContext(ServiceContext);
   const addSubscription = useSubscriptions();
   const [activeTab, setActiveTab] = React.useState(0);
@@ -103,3 +103,5 @@ export const Archives: React.FunctionComponent<ArchivesProps> = () => {
     </BreadcrumbPage>
   );
 };
+
+export default Archives;

src/app/CreateRecording/CreateRecording.tsx

@@ -121,3 +121,4 @@ const Comp: React.FunctionComponent<RouteComponentProps<{}, StaticContext, Creat
 };
 
 export const CreateRecording = withRouter(Comp);
+export default CreateRecording;

src/app/Dashboard/Dashboard.tsx

@@ -38,6 +38,10 @@
 import * as React from 'react';
 import { TargetView } from '@app/TargetView/TargetView';
 
-export const Dashboard = () => {
+export interface DashboardProps {}
+
+export const Dashboard: React.FunctionComponent<DashboardProps> = (props) => {
   return <TargetView pageTitle="Dashboard" compactSelect={true} />;
 };
+
+export default Dashboard;

src/app/Events/Events.tsx

@@ -118,3 +118,5 @@ export const Events: React.FunctionComponent<EventsProps> = (props) => {
     </>
   );
 };
+
+export default Events;

src/app/LoadingView/LoadingView.tsx

@@ -38,7 +38,9 @@
 import * as React from 'react';
 import { Bullseye, Spinner } from '@patternfly/react-core';
 
-export const LoadingView: React.FunctionComponent = () => {
+export interface LoadingViewProps {}
+
+export const LoadingView: React.FunctionComponent<LoadingViewProps> = (props) => {
   return (
     <>
       <br />
@@ -48,3 +50,5 @@ export const LoadingView: React.FunctionComponent = () => {
     </>
   );
 };
+
+export default LoadingView;

src/app/Login/Login.tsx

@@ -45,7 +45,9 @@ import { NoopAuthForm } from './NoopAuthForm';
 import { ConnectionError } from './ConnectionError';
 import { AuthMethod } from '@app/Shared/Services/Login.service';
 
-export const Login = () => {
+export interface LoginProps {}
+
+export const Login: React.FunctionComponent<LoginProps> = (props) => {
   const serviceContext = React.useContext(ServiceContext);
   const notifications = React.useContext(NotificationsContext);
   const [authMethod, setAuthMethod] = React.useState('');
@@ -109,3 +111,5 @@ export const Login = () => {
     </PageSection>
   );
 };
+
+export default Login;

src/app/NotFound/NotFound.tsx

@@ -50,7 +50,9 @@ import '@app/app.css';
 import { MapMarkedAltIcon } from '@patternfly/react-icons';
 import { IAppRoute, routes, flatten } from '@app/routes';
 
-const NotFound: React.FunctionComponent = () => {
+export interface NotFoundProps {}
+
+export const NotFound: React.FunctionComponent<NotFoundProps> = (props) => {
   const cards = flatten(routes)
     .filter((route: IAppRoute): boolean => !!route.description)
     .sort((a: IAppRoute, b: IAppRoute): number => a.title.localeCompare(b.title))
@@ -80,4 +82,4 @@ const NotFound: React.FunctionComponent = () => {
   );
 };
 
-export { NotFound };
+export default NotFound;

src/app/Recordings/Recordings.tsx

@@ -43,7 +43,9 @@ import { ActiveRecordingsTable } from './ActiveRecordingsTable';
 import { ArchivedRecordingsTable } from './ArchivedRecordingsTable';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
 
-export const Recordings = () => {
+export interface RecordingsProps {}
+
+export const Recordings: React.FunctionComponent<RecordingsProps> = (props) => {
   const context = React.useContext(ServiceContext);
   const [activeTab, setActiveTab] = React.useState(0);
   const [archiveEnabled, setArchiveEnabled] = React.useState(false);
@@ -81,3 +83,5 @@ export const Recordings = () => {
     </TargetView>
   );
 };
+
+export default Recordings;