Perf

src/public/js/register.js

@@ -2,14 +2,16 @@ if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready.then(async (sw) => {
         //await registerRemoteListener(sw.active!)
         console.log('Service Worker Ready');
-        setDefaultTransport();
+        await createTransportScripts()
+        setDefaultTransport()
     });
-    navigator.serviceWorker.register('/sw.js', { scope: '/' }) 
+    navigator.serviceWorker.register('/sw.js', { scope: '/' })
 }
 function regSW() {
     if ('serviceWorker' in navigator) {
         navigator.serviceWorker.ready.then(async (sw) => {
-            setDefaultTransport();
+            await createTransportScripts()
+            setDefaultTransport()
         })
         navigator.serviceWorker.register('/sw.js', { scope: '/' })
     }

src/public/js/tabs.js

@@ -188,4 +188,6 @@ function init() {
         favicon: 'favicon.ico',
     });
 }
+
+
 init();

src/public/js/transports.js

@@ -1,5 +1,25 @@
 const wispUrl = localStorage.getItem('wispUrl') || (location.protocol === "https:" ? "wss" : "ws") + "://" + location.host + "/wisp/";
 
+function createTransportScripts() {
+    return new Promise((resolve) => {
+        const epoxyScript = document.createElement('script');
+        epoxyScript.src = 'epoxy/index.js';
+        //epoxyScript.defer = true;
+        document.body.appendChild(epoxyScript);
+        const libcurlScript = document.createElement('script');
+        libcurlScript.src = 'libcurl/index.cjs';
+        //libcurlScript.defer = true;
+        document.body.appendChild(libcurlScript);
+        //wait for the scripts to load 
+        epoxyScript.onload = () => {
+            libcurlScript.onload = () => {
+                console.log('Transport Scripts Loaded');
+                resolve();
+            }
+        }
+    });
+}
+
 function setTransports(transport) {
         function localStorageTransport() {
             switch (localStorage.getItem('transports')) {

src/views/layouts/index.erb

@@ -5,8 +5,6 @@
     <title><%= yield_content :title %></title> 
     <link rel="stylesheet" href="css/globals.css">
     <script src="baremux/bare.cjs" defer></script>
-    <script src="epoxy/index.js" defer></script>
-    <script src="libcurl/index.cjs" defer></script>
     <script src="js/bareTransport/bareMod.<%= getExtension() %>" defer></script>
     <script src="js/transports.<%= getExtension() %>" defer></script>
     <script src="uv/uv.bundle.js" defer></script>