build(ui): code-split ApiDocs and Reports components (#12061)

Signed-off-by: Anton Gilgur <[email protected]>

ui/src/app/apidocs/components/apiDocs.tsx

@@ -1,17 +1,30 @@
 import {Page} from 'argo-ui';
 import * as React from 'react';
-import SwaggerUI from 'swagger-ui-react';
-import 'swagger-ui-react/swagger-ui.css';
 import {uiUrl} from '../../shared/base';
+import {Loading} from '../../shared/components/loading';
 import {useCollectEvent} from '../../shared/components/use-collect-event';
 
 export const ApiDocs = () => {
     useCollectEvent('openedApiDocs');
     return (
         <Page title='Swagger'>
             <div className='argo-container'>
-                <SwaggerUI url={uiUrl('assets/openapi-spec/swagger.json')} defaultModelExpandDepth={0} />
+                <SuspenseSwaggerUI url={uiUrl('assets/openapi-spec/swagger.json')} defaultModelExpandDepth={0} />
             </div>
         </Page>
     );
 };
+
+// lazy load SwaggerUI as it is infrequently used and imports very large components (which can be split into a separate bundle)
+const LazySwaggerUI = React.lazy(() => {
+    import('swagger-ui-react/swagger-ui.css');
+    return import('swagger-ui-react');
+});
+
+function SuspenseSwaggerUI(props: any) {
+    return (
+        <React.Suspense fallback={<Loading />}>
+            <LazySwaggerUI {...props} />
+        </React.Suspense>
+    );
+}

ui/src/app/cron-workflows/components/pretty-schedule.tsx

@@ -1,7 +1,7 @@
-import React = require('react');
-import {WarningIcon} from '../../shared/components/fa-icons';
+import x from 'cronstrue';
+import * as React from 'react';
 
-const x = require('cronstrue');
+import {WarningIcon} from '../../shared/components/fa-icons';
 
 /*
     https://github.com/bradymholt/cRonstrue
@@ -12,7 +12,7 @@ const x = require('cronstrue');
     sometime it'll not work as expected. Therefore, we must let the user know about this.
  */
 
-export const PrettySchedule = ({schedule}: {schedule: string}) => {
+export function PrettySchedule({schedule}: {schedule: string}) {
     try {
         if (schedule.split(' ').length >= 6) {
             throw new Error('cron schedules must consist of 5 values only');
@@ -26,4 +26,4 @@ export const PrettySchedule = ({schedule}: {schedule: string}) => {
             </span>
         );
     }
-};
+}

ui/src/app/cron-workflows/components/schedule-validator.tsx

@@ -1,9 +1,9 @@
-import React = require('react');
-import {SuccessIcon, WarningIcon} from '../../shared/components/fa-icons';
+import x from 'cronstrue';
+import * as React from 'react';
 
-const x = require('cronstrue');
+import {SuccessIcon, WarningIcon} from '../../shared/components/fa-icons';
 
-export const ScheduleValidator = ({schedule}: {schedule: string}) => {
+export function ScheduleValidator({schedule}: {schedule: string}) {
     try {
         if (schedule.split(' ').length >= 6) {
             throw new Error('cron schedules must consist of 5 values only');
@@ -20,4 +20,4 @@ export const ScheduleValidator = ({schedule}: {schedule: string}) => {
             </span>
         );
     }
-};
+}

ui/src/app/event-flow/components/event-flow-details/event-flow-page.tsx

@@ -1,6 +1,6 @@
 import {Page, SlidingPanel, Tabs} from 'argo-ui';
 import {useContext, useEffect, useState} from 'react';
-import React = require('react');
+import * as React from 'react';
 import {RouteComponentProps} from 'react-router-dom';
 import {Observable} from 'rxjs';
 import {filter, map} from 'rxjs/operators';
@@ -34,7 +34,7 @@ import {ID} from './id';
 
 require('./event-flow-page.scss');
 
-export const EventFlowPage = ({history, location, match}: RouteComponentProps<any>) => {
+export function EventFlowPage({history, location, match}: RouteComponentProps<any>) {
     // boiler-plate
     const {navigation} = useContext(Context);
     const queryParams = new URLSearchParams(location.search);
@@ -355,4 +355,4 @@ export const EventFlowPage = ({history, location, match}: RouteComponentProps<an
             </SlidingPanel>
         </Page>
     );
-};
+}

ui/src/app/reports/components/report-container.tsx

@@ -1,9 +1,20 @@
 import * as React from 'react';
 import {Route, RouteComponentProps, Switch} from 'react-router';
-import {Reports} from './reports';
+import {Loading} from '../../shared/components/loading';
 
 export const ReportsContainer = (props: RouteComponentProps<any>) => (
     <Switch>
-        <Route exact={true} path={`${props.match.path}/:namespace?`} component={Reports} />
+        <Route exact={true} path={`${props.match.path}/:namespace?`} component={SuspenseReports} />
     </Switch>
 );
+
+// lazy load Reports as it is infrequently used and imports large Chart components (which can be split into a separate bundle)
+const LazyReports = React.lazy(() => import('./reports'));
+
+function SuspenseReports(props: RouteComponentProps<any>) {
+    return (
+        <React.Suspense fallback={<Loading />}>
+            <LazyReports {...props} />
+        </React.Suspense>
+    );
+}

ui/src/app/reports/components/reports.tsx

@@ -131,3 +131,5 @@ export function Reports({match, location, history}: RouteComponentProps<any>) {
         </Page>
     );
 }
+
+export default Reports;

ui/src/app/shared/components/chat-button.tsx

@@ -1,9 +1,9 @@
-import React = require('react');
+import * as React from 'react';
 import {useEffect, useState} from 'react';
 import {Link} from '../../../models';
 import {services} from '../services';
 
-export const ChatButton = () => {
+export function ChatButton() {
     const [link, setLink] = useState<Link>();
 
     useEffect(() => {
@@ -27,4 +27,4 @@ export const ChatButton = () => {
             </a>
         </div>
     );
-};
+}

ui/src/app/shared/components/links.tsx

@@ -1,6 +1,6 @@
 import {ObjectMeta} from 'argo-ui/src/models/kubernetes';
 import {useEffect, useState} from 'react';
-import React = require('react');
+import * as React from 'react';
 import {Link, Workflow} from '../../../models';
 import {services} from '../services';
 import {Button} from './button';

ui/src/app/shared/components/object-parser.ts

@@ -1,4 +1,4 @@
-import jsyaml = require('js-yaml');
+import jsyaml from 'js-yaml';
 
 export function parse<T>(value: string) {
     if (value.startsWith('{')) {

ui/src/app/shared/cron.tsx

@@ -1,4 +1,4 @@
-import parser = require('cron-parser');
+import parser from 'cron-parser';
 
 export function getNextScheduledTime(schedule: string, tz: string): Date {
     let out: Date;

ui/src/app/tsconfig.json

@@ -3,7 +3,8 @@
         "outDir": "./../../dist/app",
         "sourceMap": true,
         "noImplicitAny": true,
-        "module": "commonjs",
+        "module": "ES2020", // must be ES2020+ for dynamic imports: https://github.com/Microsoft/TypeScript/issues/16675, https://github.com/webpack/webpack/issues/5703#issuecomment-357512412
+        "moduleResolution": "node",
         "esModuleInterop": true,
         "target": "es5",
         "jsx": "react",

ui/src/app/workflows/components/workflow-logs-viewer/workflow-logs-viewer.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {useContext, useEffect, useState} from 'react';
 
 import {Autocomplete} from 'argo-ui';
-import moment = require('moment-timezone');
+import moment from 'moment-timezone';
 import {Observable} from 'rxjs';
 import {map, publishReplay, refCount} from 'rxjs/operators';
 import * as models from '../../../../models';