chore(app): make runner page load faster (#20082)

* load webpack bundle earlier with a deferred promise

* add p-defer to optimize deps

* remove temp var

Co-authored-by: Mark Noonan <oddlyaromatic@gmail.com>

packages/app/cypress.config.ts

@@ -26,6 +26,7 @@ export default defineConfig({
         include: [
           '@headlessui/vue',
           'vue3-file-selector',
+          'p-defer',
           'just-my-luck',
           'combine-properties',
           'faker',

packages/app/src/main.ts

@@ -7,6 +7,7 @@ import { makeUrqlClient } from '@packages/frontend-shared/src/graphql/urqlClient
 import { decodeBase64Unicode } from '@packages/frontend-shared/src/utils/base64'
 import { createI18n } from '@cy/i18n'
 import { createRouter } from './router/router'
+import { injectBundle } from './runner/injectBundle'
 import { createPinia } from './store'
 import Toast, { POSITION } from 'vue-toastification'
 import 'vue-toastification/dist/index.css'
@@ -26,6 +27,11 @@ const ws = createWebsocket(config.socketIoRoute)
 
 window.ws = ws
 
+// This injects the Cypress driver and Reporter, which are bundled with Webpack.
+// No need to wait for it to finish - it's resolved async with a deferred promise,
+// So it'll be ready when we need to run a spec. If not, we will wait for it.
+injectBundle(config.namespace)
+
 app.use(Toast, {
   position: POSITION.BOTTOM_RIGHT,
 })

packages/app/src/runner/index.ts

@@ -2,11 +2,10 @@
 
 /**
  * This is the seam between the new "unified app", built with
- * Vite and Vue, and the existing code, including:
+ * Vite and Vue.
+ * It consumes some older code, including:
  * - driver
  * - reporter
- * - event manager
- * - anything in runner-shared, such as AutIframe, etc.
  * which are built with React and bundle with webpack.
  *
  * The entry point for the webpack bundle is `runner-ct/main.tsx`.
@@ -16,7 +15,7 @@
  */
 import { watchEffect } from 'vue'
 import { getMobxRunnerStore, initializeMobxStore, useAutStore, useRunnerUiStore } from '../store'
-import { injectBundle } from './injectBundle'
+import { dfd } from './injectBundle'
 import type { SpecFile } from '@packages/types/src/spec'
 import { UnifiedReporterAPI } from './reporter'
 import { getRunnerElement, empty } from './utils'
@@ -305,12 +304,12 @@ function runSpecE2E (spec: SpecFile) {
  * This only needs to happen once, prior to running the first spec.
  */
 async function initialize () {
+  await dfd.promise
+
   isTorndown = false
 
   const config = JSON.parse(decodeBase64Unicode(window.__CYPRESS_CONFIG__.base64Config))
 
-  await injectBundle(config.namespace)
-
   if (isTorndown) {
     return
   }

packages/app/src/runner/injectBundle.ts

@@ -1,15 +1,11 @@
-export async function injectBundle (namespace: string) {
-  const src = `/${namespace}/runner/cypress_runner.js`
+import pDefer from 'p-defer'
 
-  const alreadyInjected = document.querySelector(`script[src="${src}"]`)
-
-  if (alreadyInjected) {
-    return
-  }
+export const dfd = pDefer()
 
+export function injectBundle (namespace: string) {
   const script = document.createElement('script')
 
-  script.src = src
+  script.src = `/${namespace}/runner/cypress_runner.js`
   script.type = 'text/javascript'
 
   const link = document.createElement('link')
@@ -17,10 +13,10 @@ export async function injectBundle (namespace: string) {
   link.rel = 'stylesheet'
   link.href = `/${namespace}/runner/cypress_runner.css`
 
+  script.onload = () => {
+    dfd.resolve()
+  }
+
   document.head.appendChild(script)
   document.head.appendChild(link)
-
-  return new Promise<void>((resolve) => {
-    script.onload = () => resolve()
-  })
 }

packages/app/vite.config.ts

@@ -10,6 +10,7 @@ export default makeConfig({
       '@urql/core',
       'vue-i18n',
       '@cypress/vue',
+      'p-defer',
       '@vue/test-utils',
       'vue-router',
       '@urql/devtools',