Fix webpack file size warnings on entrypoints in presto-ui

presto-ui/src/components/ClusterHUD.jsx

@@ -293,3 +293,4 @@ export class ClusterHUD extends React.Component {
     }
 }
 
+export default ClusterHUD;

presto-ui/src/components/LivePlan.jsx

@@ -18,7 +18,8 @@ import ReactDOMServer from "react-dom/server";
 import * as dagreD3 from "dagre-d3";
 import * as d3 from "d3";
 
-import {formatRows, getStageStateColor, initializeGraph, initializeSvg, truncateString} from "../utils";
+import {formatRows, getStageStateColor, truncateString} from "../utils";
+import {initializeGraph, initializeSvg} from "../d3utils";
 import {QueryHeader} from "./QueryHeader";
 
 type StageStatisticsProps = {
@@ -359,3 +360,5 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
         );
     }
 }
+
+export default LivePlan;

presto-ui/src/components/QueryDetail.jsx

@@ -1706,3 +1706,5 @@ export class QueryDetail extends React.Component {
         );
     }
 }
+
+export default QueryDetail;

presto-ui/src/components/QueryList.jsx

@@ -718,3 +718,4 @@ export class QueryList extends React.Component {
     }
 }
 
+export default QueryList;

presto-ui/src/components/QueryPlanView.jsx

@@ -20,7 +20,8 @@ import { StageStatistics, PlanNode } from './LivePlan';
 import ReactDOMServer from "react-dom/server";
 import * as dagreD3 from "dagre-d3";
 import * as d3 from "d3";
-import { formatRows, getStageStateColor, initializeGraph } from "../utils";
+import { formatRows, getStageStateColor } from "../utils";
+import { initializeGraph } from "../d3utils";
 
 export default function PlanView({show, data}) {
     const widgets = React.useRef({

presto-ui/src/components/QueryStageView.jsx

@@ -26,10 +26,10 @@ import {
     formatDuration,
     getChildren,
     getTaskNumber,
-    initializeGraph,
     parseDataSize,
     parseDuration
 } from "../utils";
+import { initializeGraph } from '../d3utils';
 
 function getTotalWallTime(operator) {
     return parseDuration(operator.addInputWall) +

presto-ui/src/components/QueryViewer.jsx

@@ -88,4 +88,6 @@ export function QueryViewer() {
             <SplitView data={state.query} show={state.tab === 'splits'} />
         </div>
     );
-}
+}
+
+export default QueryViewer;

presto-ui/src/components/SQLInput.jsx

@@ -20,7 +20,9 @@ import SqlBaseListener from '../sql-parser/SqlBaseListener.js';
 import Editor from 'react-simple-code-editor';
 import { highlight, languages } from 'prismjs/components/prism-core';
 import 'prismjs/components/prism-sql';
-import 'prismjs/themes/prism-okaidia.css';
+// Remove primsjs theme to avoid loading error with dynamic import
+// move import 'prismjs/themes/prism.css' to sql-client.jsx
+// import 'prismjs/themes/prism-okaidia.css';
 import { clsx } from 'clsx';
 import PrestoClient from "@prestodb/presto-js-client";
 

presto-ui/src/components/StageDetail.jsx

@@ -25,12 +25,11 @@ import {
     getChildren,
     getFirstParameter,
     getTaskNumber,
-    initializeGraph,
-    initializeSvg,
     isQueryEnded,
     parseDataSize,
     parseDuration
 } from "../utils";
+import { initializeGraph, initializeSvg } from "../d3utils";
 import {QueryHeader} from "./QueryHeader";
 
 function getTotalWallTime(operator) {
@@ -643,3 +642,5 @@ export class StageDetail extends React.Component {
         );
     }
 }
+
+export default StageDetail;

presto-ui/src/components/WorkerStatus.jsx

@@ -426,3 +426,5 @@ export class WorkerStatus extends React.Component {
         );
     }
 }
+
+export default WorkerStatus;

presto-ui/src/components/WorkerThreadList.jsx

@@ -281,3 +281,5 @@ export class WorkerThreadList extends React.Component {
         );
     }
 }
+
+export default WorkerThreadList;

presto-ui/src/d3utils.js

@@ -0,0 +1,34 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as dagreD3 from "dagre-d3";
+import * as d3 from "d3";
+
+// DagreD3 Graph-related functions
+// ===============================
+
+export function initializeGraph(): any
+{
+    return new dagreD3.graphlib.Graph({compound: true})
+        .setGraph({rankdir: 'BT'})
+        .setDefaultEdgeLabel(function () { return {}; });
+}
+
+export function initializeSvg(selector: any): any
+{
+    const svg = d3.select(selector);
+    svg.append("g");
+
+    return svg;
+}

presto-ui/src/embedded_plan.jsx

@@ -1,7 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import {LivePlan} from "./components/LivePlan";
 import {getFirstParameter} from "./utils";
+import lazy from "./lazy";
+
+const LivePlan = lazy('LivePlan');
 
 ReactDOM.render(
     <LivePlan queryId={getFirstParameter(window.location.search)} isEmbedded={true}/>,

presto-ui/src/index.jsx

@@ -1,9 +1,11 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import {ClusterHUD} from "./components/ClusterHUD";
-import {QueryList} from "./components/QueryList";
+import lazy from "./lazy";
 import { PageTitle } from "./components/PageTitle";
 
+const ClusterHUD = lazy('ClusterHUD');
+const QueryList = lazy('QueryList');
+
 ReactDOM.render(
     <PageTitle titles={['Cluster Overview', 'Resource Groups', 'SQL Client']} urls={['./index.html', 'res_groups.html', 'sql_client.html']} current={0}/>,
     document.getElementById('title')

presto-ui/src/lazy.jsx

@@ -0,0 +1,27 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { Suspense, lazy } from 'react';
+
+const LazyComponent = (filename: string) => {
+    const Component = lazy(() => import(`./components/${filename}`));
+    const LazyWrapper = (props: any) =>(
+        <Suspense fallback={<div className='loader'>Loading...</div>}>
+            <Component {...props} />
+        </Suspense>
+    );
+    return LazyWrapper;
+}
+
+export default LazyComponent

presto-ui/src/plan.jsx

@@ -1,9 +1,11 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import {LivePlan} from "./components/LivePlan";
+import lazy from "./lazy";
 import {PageTitle} from "./components/PageTitle";
 import {getFirstParameter} from "./utils";
 
+const LivePlan = lazy('LivePlan');
+
 ReactDOM.render(
     <PageTitle titles={["Query Details"]} />,
     document.getElementById('title')

presto-ui/src/query.jsx

@@ -1,8 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import {QueryDetail} from "./components/QueryDetail";
+import lazy from "./lazy";
 import {PageTitle} from "./components/PageTitle";
 
+const QueryDetail = lazy('QueryDetail');
+
 ReactDOM.render(
     <PageTitle titles={["Query Details"]} />,
     document.getElementById('title')

presto-ui/src/query_viewer.jsx

@@ -1,7 +1,9 @@
 import { createRoot } from 'react-dom/client';
-import { QueryViewer } from "./components/QueryViewer";
+import lazy from "./lazy";
 import { PageTitle } from "./components/PageTitle";
 
+const QueryViewer = lazy('QueryViewer');
+
 const title = createRoot(document.getElementById('title'));
 title.render(<PageTitle titles={["Query Viewer"]} path='..'/>);
 

presto-ui/src/res_groups.jsx

@@ -1,6 +1,8 @@
 import { createRoot } from 'react-dom/client';
-import ResourceGroupView from "./components/ResourceGroupView";
 import { PageTitle } from "./components/PageTitle";
+import lazy from "./lazy";
+
+const ResourceGroupView = lazy('ResourceGroupView');
 
 const title = createRoot(document.getElementById('title'));
 title.render(<PageTitle titles={['Cluster Overview', 'Resource Groups', 'SQL Client']} urls={['./index.html', './res_groups.html', 'sql_client.html']} current={1} />);

presto-ui/src/sql_client.jsx

@@ -1,6 +1,9 @@
 import { createRoot } from 'react-dom/client';
-import SQLClientView from "./components/SQLClient";
 import { PageTitle } from "./components/PageTitle";
+import 'prismjs/themes/prism-okaidia.css';
+import lazy from "./lazy";
+
+const SQLClientView = lazy('SQLClient');
 
 const title = createRoot(document.getElementById('title'));
 title.render(<PageTitle titles={['Cluster Overview', 'Resource Groups', 'SQL Client']} urls={['./index.html', './res_groups.html', './sql_client.html']} current={2} />);

presto-ui/src/stage.jsx

@@ -1,7 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import {StageDetail} from "./components/StageDetail";
 import {PageTitle} from "./components/PageTitle";
+import lazy from "./lazy";
+
+const StageDetail = lazy('StageDetail');
 
 ReactDOM.render(
     <PageTitle titles={["Query Details"]} />,

presto-ui/src/timeline.jsx

@@ -1,6 +1,8 @@
-import Splits from "./components/Splits";
 import { PageTitle } from "./components/PageTitle";
 import { createRoot } from 'react-dom/client';
+import lazy from "./lazy";
+
+const Splits = lazy('Splits');
 
 const title = createRoot(document.getElementById('title'));
 title.render(<PageTitle titles={["Timeline"]} />);

presto-ui/src/utils.js

@@ -13,9 +13,6 @@
  */
 //@flow
 
-import * as dagreD3 from "dagre-d3";
-import * as d3 from "d3";
-
 // Query display
 // =============
 
@@ -196,24 +193,6 @@ export function addExponentiallyWeightedToHistory (value: number, valuesArray: n
     return valuesArray.concat([movingAverage]).slice(Math.max(valuesArray.length - MAX_HISTORY, 0));
 }
 
-// DagreD3 Graph-related functions
-// ===============================
-
-export function initializeGraph(): any
-{
-    return new dagreD3.graphlib.Graph({compound: true})
-        .setGraph({rankdir: 'BT'})
-        .setDefaultEdgeLabel(function () { return {}; });
-}
-
-export function initializeSvg(selector: any): any
-{
-    const svg = d3.select(selector);
-    svg.append("g");
-
-    return svg;
-}
-
 export function getChildren(nodeInfo: any): any[]
 {
     // TODO: Remove this function by migrating StageDetail to use node JSON representation

presto-ui/src/webpack.config.js

@@ -13,16 +13,16 @@ module.exports = (env) => {
     const outputDir = 'target/webapp';
     return {
         entry: {
-            'index': path.join(__dirname, 'index.jsx'),
-            'query': path.join(__dirname, 'query.jsx'),
-            'plan': path.join(__dirname, 'plan.jsx'),
-            'query_viewer': {import: path.join(__dirname, 'query_viewer.jsx'), filename: path.join(outputDir, 'dev', '[name].js')},
-            'embedded_plan': path.join(__dirname, 'embedded_plan.jsx'),
-            'stage': path.join(__dirname, 'stage.jsx'),
-            'worker': path.join(__dirname, 'worker.jsx'),
-            'timeline': path.join(__dirname, 'timeline.jsx'),
-            'res_groups': path.join(__dirname, 'res_groups.jsx'),
-            'sql_client': path.join(__dirname, 'sql_client.jsx'),
+            'index': './index.jsx',
+            'query': './query.jsx',
+            'plan': './plan.jsx',
+            'query_viewer': {import: './query_viewer.jsx', filename: path.join(outputDir, 'dev', '[name].js')},
+            'embedded_plan': './embedded_plan.jsx',
+            'stage': './stage.jsx',
+            'worker': './worker.jsx',
+            'timeline': './timeline.jsx',
+            'res_groups': './res_groups.jsx',
+            'sql_client': './sql_client.jsx',
             'bootstrap_css': path.join(__dirname, 'static', 'vendor', 'bootstrap', 'css', 'bootstrap.min.external-fonts.css'),
             'css_loader': path.join(__dirname, 'static', 'vendor', 'css-loaders', 'loader.css'),
             'css_presto': path.join(__dirname, 'static', 'assets', 'presto.css'),
@@ -34,7 +34,7 @@ module.exports = (env) => {
                 plugins: [
                     new CopyPlugin({
                         patterns: [
-                            {from: "static", to: outputDir},
+                            {from: "static", to: path.join(__dirname, "..", outputDir)},
                         ]
                     }),
                     new HtmlWebpackPlugin({
@@ -82,8 +82,9 @@ module.exports = (env) => {
             extensions: ['.*', '.js', '.jsx']
         },
         output: {
-            path: path.join(__dirname, '..'),
-            filename: path.join(outputDir, '[name].js'),
+            path: path.join(__dirname, '..', outputDir),
+            filename: '[name].js',
+            chunkFilename: '[name].chunk.js',
         },
         optimization: {
             minimize: mode === 'production',
@@ -98,6 +99,24 @@ module.exports = (env) => {
                     extractComments: false,
                 }),
                 '...'],
+            splitChunks: {
+                chunks: 'async',
+                maxSize: 244000,
+                minRemainingSize: 0,
+                minChunks: 1,
+                cacheGroups: {
+                    defaultVendors: {
+                        test: /[\\/]node_modules[\\/]/,
+                        priority: -10,
+                        reuseExistingChunk: true,
+                    },
+                    default: {
+                        minChunks: 2,
+                        priority: -20,
+                        reuseExistingChunk: true,
+                    },
+                },
+            },
         },
         devServer: {
             static: {