perf: preload monaco's script

okikio · Dec 12, 2021 · 58062d9 · 58062d9
1 parent 12be0a1
commit 58062d9
Show file tree

Hide file tree

Showing 10 changed files with 242 additions and 269 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -42,7 +42,7 @@ task("html", async () => {
         { parser },
 
         { rehype },
-        { h },
+        { h }
     ] = await Promise.all([
         import("gulp-pug"),
         import("gulp-plumber"),
@@ -52,7 +52,7 @@ task("html", async () => {
         import("posthtml-parser"),
 
         import("rehype"),
-        import("hastscript"),
+        import("hastscript")
     ]);
 
     let plugins = [
@@ -112,7 +112,7 @@ task("html", async () => {
                         const value = String(await engine.process(content));
                         return parser(value);
                     };
-                })(),
+                })()
             ]),
         ],
         dest: htmlFolder,
@@ -265,6 +265,58 @@ task("js", async () => {
     );
 });
 
+task("preload-monaco", async () => {
+    const [
+        { default: plumber },
+        { default: posthtml },
+
+        { default: glob }
+    ] = await Promise.all([
+        import("gulp-plumber"),
+        import("gulp-posthtml"),
+
+        import("tiny-glob")
+    ]);
+
+    let [monaco] = await glob(`${jsFolder}/monaco-*.js`);
+    monaco = monaco.replace(`${destFolder}`, "");
+
+    let linkEl = {
+        tag: "link",
+        attrs: {
+            src: monaco,
+            type: 'modulepreload', 
+            as: "script", 
+            importance: "high",
+            id: "monaco-preload"
+        }
+    };
+
+    return stream(`${htmlFolder}/index.html`, {
+        pipes: [
+            plumber(),
+            posthtml([
+                async (tree) => {
+                    tree.match({ tag: 'head' }, (node) => {
+                        let indexOf = node?.content.indexOf(linkEl);
+
+                        if (Array.isArray(node?.content)) 
+                            if (indexOf > -1) 
+                                node.content[indexOf] = linkEl;
+                            else
+                                node.content.push(linkEl);
+                        else 
+                            node.content = [linkEl];
+
+                        return node;
+                    });
+                }
+            ]),
+        ],
+        dest: htmlFolder,
+    });
+});
+
 task("minify-js", async () => {
     const [
         { default: size },
@@ -432,11 +484,17 @@ task("watch", async () => {
     );
 
     watch(
-        [`${tsFolder}/**/*.{tsx,ts}`, `!${tsFolder}/**/*.d.ts`],
+        [`${tsFolder}/**/*.{tsx,ts}`, `!${tsFolder}/modules/monaco.ts`, `!${tsFolder}/**/*.d.ts`],
         { delay: 850 },
         series("js", "service-worker", "reload")
     );
 
+    watch(
+        [`${tsFolder}/modules/monaco.ts`, `!${tsFolder}/**/*.d.ts`],
+        { delay: 850 },
+        series("js", "preload-monaco", "service-worker", "reload")
+    );
+
     watch(
         [`${assetsFolder}/**/*`],
         { delay: 750 },
@@ -450,6 +508,7 @@ task(
         "clean",
         parallel("html", "css", "assets", "js"),
         // "minify-js",
+        "preload-monaco", 
         parallelFn("minify-css", "service-worker", "sitemap")
     )
 );
@@ -458,6 +517,7 @@ task(
     series(
         "clean",
         parallel("html", "css", "assets", "js"),
+        "preload-monaco", 
         "service-worker",
         "watch"
     )

diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
         "@okikio/native": "^3.0.1",
         "@okikio/sharedworker": "^1.0.3",
         "@rollup/plugin-virtual": "^2.0.3",
-        "@swc/wasm-web": "^1.2.117",
+        "@swc/wasm-web": "^1.2.119",
         "@typescript/ata": "^0.9.3",
         "assert": "^2.0.0",
         "browser-builtins": "^3.3.1",
@@ -52,17 +52,17 @@
         "path": "^0.12.7",
         "prettier": "^2.5.1",
         "pretty-bytes": "^5.6.0",
-        "solid-js": "^1.2.5",
+        "solid-js": "^1.2.6",
         "stream": "^0.0.2",
-        "typescript": "^4.5.2",
+        "typescript": "^4.5.3",
         "web-animations-js": "^2.3.2",
         "workbox-window": "^6.4.2"
     },
     "devDependencies": {
         "@commitlint/cli": "^15.0.0",
         "@commitlint/config-conventional": "^15.0.0",
         "@csstools/postcss-sass": "^4.0.0",
-        "@types/node": "^16.11.11",
+        "@types/node": "^16.11.12",
         "autoprefixer": "^10.4.0",
         "browser-sync": "^2.27.7",
         "commitizen": "^4.2.4",
@@ -96,11 +96,12 @@
         "rehype-external-links": "^1.0.0",
         "rehype-highlight": "^5.0.1",
         "rehype-slug": "^5.0.0",
-        "rollup": "^2.60.2",
+        "rollup": "^2.61.1",
         "rollup-plugin-terser": "^7.0.2",
-        "sass": "^1.44.0",
+        "sass": "^1.45.0",
         "standard-version": "^9.3.2",
-        "tailwindcss": "^2.2.19",
+        "tailwindcss": "^3.0.1",
+        "tiny-glob": "^0.2.9",
         "workbox-build": "^6.4.2"
     }
 }