Merge pull request #498 from gemini-testing/HERMIONE-1138.perf_net

perf: optimize network load (preload plugins, dbUrls, split sql.js)

lib/server-utils.ts

@@ -133,7 +133,8 @@ export async function saveStaticFilesToReportDir(htmlReporter: HtmlReporter, plu
         copyToReportDir(destPath, ['report.min.js', 'report.min.css'], staticFolder),
         fs.copy(path.resolve(staticFolder, 'index.html'), path.resolve(destPath, 'index.html')),
         fs.copy(path.resolve(staticFolder, 'icons'), path.resolve(destPath, 'icons')),
-        fs.copy(require.resolve('@gemini-testing/sql.js'), path.resolve(destPath, 'sql-wasm.js')),
+        fs.copy(require.resolve('@gemini-testing/sql.js/dist/sql-wasm.js'), path.resolve(destPath, 'sql-wasm.js')),
+        fs.copy(require.resolve('@gemini-testing/sql.js/dist/sql-wasm.wasm'), path.resolve(destPath, 'sql-wasm.wasm')),
         copyPlugins(pluginConfig, destPath)
     ]);
 }
@@ -173,7 +174,6 @@ export function urlPathNameEndsWith(currentUrl: string, searchString: string): b
 export async function writeDatabaseUrlsFile(destPath: string, srcPaths: string[]): Promise<void> {
     const jsonUrls = srcPaths.filter(p => urlPathNameEndsWith(p, '.json'));
     const dbUrls = srcPaths.filter(p => urlPathNameEndsWith(p, '.db'));
-
     const data = {
         dbUrls,
         jsonUrls

lib/static/modules/actions.js

@@ -75,6 +75,8 @@ export const initStaticReport = () => {
 
             performance?.mark?.(performanceMarks.DBS_LOADED);
 
+            plugins.preloadAll(dataFromStaticFile.config);
+
             fetchDbDetails = fetchDbResponses.map(({url, status, data}) => ({url, status, success: !!data}));
 
             const dataForDbs = fetchDbResponses.map(({data}) => data).filter(data => data);

lib/static/modules/load-plugin.js

@@ -49,17 +49,23 @@ const whitelistedDeps = {
 // - an array with the string list of required dependencies and a function as the last item.
 //   The function will be called with the dependencies as arguments plus `options` arg.
 
+const loadingPlugins = {};
 const pendingPlugins = {};
 
-export default async function loadPlugin(pluginName, pluginConfig) {
+const getPluginScriptPath = pluginName => `plugins/${encodeURIComponent(pluginName)}/plugin.js`;
+
+export function preloadPlugin(pluginName) {
+    loadingPlugins[pluginName] = loadingPlugins[pluginName] || getScriptText(pluginName);
+}
+
+export async function loadPlugin(pluginName, pluginConfig) {
     if (pendingPlugins[pluginName]) {
         return pendingPlugins[pluginName];
     }
 
-    const pluginScriptPath = `plugins/${encodeURIComponent(pluginName)}/plugin.js`;
+    const scriptTextPromise = loadingPlugins[pluginName] || getScriptText(pluginName);
 
-    return pendingPlugins[pluginName] = Promise.resolve(pluginScriptPath)
-        .then(getScriptText)
+    return pendingPlugins[pluginName] = scriptTextPromise
         .then(executePluginCode)
         .then(plugin => initPlugin(plugin, pluginName, pluginConfig))
         .then(null, err => {
@@ -103,7 +109,9 @@ function executePluginCode(code) {
     return exec();
 }
 
-async function getScriptText(scriptUrl) {
-    const result = await axios.get(scriptUrl);
-    return result.data;
+async function getScriptText(pluginName) {
+    const scriptUrl = getPluginScriptPath(pluginName);
+    const {data} = await axios.get(scriptUrl);
+
+    return data;
 }

lib/static/modules/plugins.js

@@ -1,8 +1,16 @@
-import loadPlugin from './load-plugin';
+import {loadPlugin, preloadPlugin} from './load-plugin';
 
 const plugins = Object.create(null);
 const loadedPluginConfigs = [];
 
+function preloadAll(config) {
+    if (!config || !config.pluginsEnabled || !Array.isArray(config.plugins)) {
+        return;
+    }
+
+    config.plugins.forEach(plugin => preloadPlugin(plugin.name));
+}
+
 async function loadAll(config) {
     // if plugins are disabled, act like there are no plugins defined
     if (!config || !config.pluginsEnabled || !Array.isArray(config.plugins)) {
@@ -49,4 +57,4 @@ function getLoadedConfigs() {
     return loadedPluginConfigs;
 }
 
-module.exports = {loadAll, getLoadedConfigs, forEach, get};
+module.exports = {preloadAll, loadAll, getLoadedConfigs, forEach, get};

lib/static/template.html

@@ -5,7 +5,9 @@
 <meta charset="utf-8">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
-<link id="dynamic-favicon" rel="icon" type="image/png" href="icons/favicon.png" />
+<link id="dynamic-favicon" rel="icon" type="image/png" href="icons/favicon.png"/>
+<link rel="preload" href="databaseUrls.json" as="fetch" crossorigin="anonymous"/>
+<link rel="preload" href="sql-wasm.wasm" as="fetch" crossorigin="anonymous"/>
 </head>
 <body class="report">
     <div id="app"></div>

package.json

@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.5",
-    "@gemini-testing/sql.js": "^1.0.1",
+    "@gemini-testing/sql.js": "^2.0.0",
     "axios": "^0.18.1",
     "better-sqlite3": "^8.5.0",
     "bluebird": "^3.5.3",

test/unit/lib/static/modules/load-plugin.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import axios from 'axios';
-import loadPlugin from 'lib/static/modules/load-plugin';
+import {loadPlugin} from 'lib/static/modules/load-plugin';
 import actionNames from 'lib/static/modules/action-names';
 import * as actions from 'lib/static/modules/actions';
 import * as selectors from 'lib/static/modules/selectors';

test/unit/lib/static/modules/plugins.js

@@ -10,7 +10,7 @@ describe('static/modules/plugins', () => {
     beforeEach(() => {
         loadPluginStub = sandbox.stub();
         plugins = proxyquire('lib/static/modules/plugins', {
-            './load-plugin': {default: loadPluginStub}
+            './load-plugin': {loadPlugin: loadPluginStub}
         });
     });