code splitting for results

Author: krausest

push_results.sh

@@ -0,0 +1,8 @@
+/usr/bin/cp webdriver-ts-results/table.html ../krausest.github.io/js-framework-benchmark/current.html
+/usr/bin/cp webdriver-ts-results/BoxPlotTable*.js ../krausest.github.io/js-framework-benchmark/
+cd ../krausest.github.io
+git add js-framework-benchmark/current.html
+git add js-framework-benchmark/BoxPlotTable*.js
+git commit -m "update results"
+git push
+cd ../js-framework-benchmark/webdriver-ts

webdriver-ts-results/BoxPlotTable.3dbc5f31bbc56578e4f0.js

@@ -16,16 +16,15 @@
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.1",
     "react-scripts": "3.4.3",
-    "redux": "^4.0.5",
-    "typescript": "^3.7.5"
+    "redux": "^4.0.5"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint './src/**/*.{ts,tsx}'",
-    "build-prod": "cross-env NODE_ENV=\"production\" webpack -c webpack.config.js && cpx dist/table.html ."
+    "build-prod": "rimraf dist && cross-env NODE_ENV=\"production\" webpack --env prod -c webpack.config.js && rimraf table.html && rimraf \"BoxPlotTable*.js\" && cpx dist/table.html . && cpx \"dist/BoxPlotTable*.js\" ."
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -49,7 +48,9 @@
     "eslint-plugin-react-hooks": "^4.1.2",
     "html-webpack-plugin": "^4.5.0",
     "inline-chunk-html-plugin": "^1.1.1",
+    "rimraf": "^3.0.2",
     "ts-loader": "^8.0.5",
+    "typescript": "^4.0.3",
     "webpack-bundle-analyzer": "^3.9.0",
     "webpack-cli": "^4.0.0"
   }

webdriver-ts-results/package-lock.json

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import {ResultTableData, DisplayMode, BenchmarkType, FrameworkType} from './Common';
 import CpuResultsTable from './tables/CpuResultsTable'
-import BoxPlotTable from './tables/BoxPlotTable'
 import MemResultsTable from './tables/MemResultsTable'
 import StartupResultsTable from './tables/StartupResultsTable'
 import { useDispatch, useSelector } from 'react-redux';
 import { sort, State } from './reducer';
+const BoxPlotTable = React.lazy(() => import(/* webpackChunkName: "BoxPlotTable" */ './tables/BoxPlotTable'));
 
 interface Props {
   type: FrameworkType;
@@ -35,9 +35,11 @@ const ResultTable = ({type}: Props) => {
           <p>{texts[type].description}</p>
             {
         displayMode === DisplayMode.BoxPlot ?
-                (<>
-            <BoxPlotTable results={data.results} frameworks={data.frameworks} benchmarks={data.getResult(BenchmarkType.CPU).benchmarks} currentSortKey={currentSortKey} sortBy={sortBy}/>
-                </>)
+                (
+            <React.Suspense fallback={<div>Loading...</div>}>
+              <BoxPlotTable results={data.results} frameworks={data.frameworks} benchmarks={data.getResult(BenchmarkType.CPU).benchmarks} currentSortKey={currentSortKey} sortBy={sortBy}/>
+            </React.Suspense>
+                )
         :
             (<>
             <CpuResultsTable currentSortKey={currentSortKey} sortBy={sortBy} data={data}/>