feat: preload monaco.min.js for faster perfs;

reenable treeshaking
okikio · Sep 17, 2021 · 0222b70 · 0222b70
1 parent 1de82fd
commit 0222b70
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 14 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -2,7 +2,7 @@
 const mode = process.argv.includes("--watch") ? "watch" : "build";
 
 // Gulp utilities
-import { watch, task, series, parallel, stream, parallelFn } from "./util.js";
+import { watch, task, series, parallel, stream, streamList, parallelFn } from "./util.js";
 import { createRequire } from 'module';
 const require = createRequire(import.meta.url);
 
@@ -114,24 +114,32 @@ task("js", async () => {
 
         { WEB_WORKER },
         { solidPlugin: solid },
-        { default: rename }
+        { default: rename },
+
+        { default: replace },
+        { basename }
     ] = await Promise.all([
         import("gulp-esbuild"),
         import("gulp-size"),
         import("gulp-if"),
 
         import("./plugins/worker.js"),
         import("esbuild-plugin-solid"),
-        import("gulp-rename")
+        import("gulp-rename"),
+
+        import("gulp-replace"),
+        import("path")
     ]);
 
     const esbuild = mode == "watch" ? createGulpEsbuild({ incremental: true }) : gulpEsBuild;
-    return stream([
-        `${tsFolder}/*.ts`,
-        `${tsFolder}/scripts/*`,
-        `!${tsFolder}/**/*.d.ts`,
-        `node_modules/esbuild-wasm/esbuild.wasm`
-    ], {
+    let monacoFilename;
+    await stream(
+        [
+            `${tsFolder}/*.ts`,
+            `${tsFolder}/scripts/*`,
+            `!${tsFolder}/**/*.d.ts`,
+            `node_modules/esbuild-wasm/esbuild.wasm`
+        ], {
         pipes: [
             // Bundle Modules
             esbuild({
@@ -146,7 +154,7 @@ task("js", async () => {
                 color: true,
                 format: "esm",
                 sourcemap: true,
-                // splitting: true,
+                splitting: true,
 
                 loader: {
                     '.ttf': 'file',
@@ -171,10 +179,26 @@ task("js", async () => {
             gulpif(
                 (file) => /monaco(.*)\.css$/.test(file.path),
                 rename("monaco.min.css")
+            ),
+
+            gulpif(
+                (file) => {
+                    let test = /monaco-(.*)\.js$/.test(file.path);
+                    if (test) monacoFilename = basename(file.path);
+                    return test;
+                },
+                rename("monaco.min.js")
             )
         ],
         dest: jsFolder, // Output
     });
+
+    return stream([`${jsFolder}/**/*.js`], {
+        pipes: [
+            replace(new RegExp(monacoFilename, "g"), "monaco.min.js"),
+        ],
+        dest: jsFolder, // Output
+    });
 });
 
 // Other assets

diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
         "gulp-postcss": "^9.0.1",
         "gulp-pug": "^5.0.0",
         "gulp-rename": "^2.0.0",
+        "gulp-replace": "^1.1.3",
         "gulp-sitemap": "^8.0.0",
         "gulp-size": "^4.0.1",
         "husky": "^7.0.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/assets/_headers b/src/assets/_headers
@@ -18,13 +18,15 @@
 
 /
   Link: </js/codicon.ttf>; rel=preload; as=font; type=font/ttf; crossorigin
-  Link: </js/index.min.css>; rel=preload; as=style
-  Link: </js/load-webanimation-polyfill.min.js>; rel=modulepreload
+  Link: </js/monaco.min.css>; rel=preload; as=style
   Link: <https://cdn.skypack.dev>; rel=preconnect; crossorigin
+  Link: </js/load-webanimation-polyfill.min.js>; rel=modulepreload
+  Link: </js/monaco.min.js>; rel=modulepreload
   Link: </js/index.min.js>; rel=modulepreload
+  Link: </js/esbuild.wasm>; rel=prefetch
+  Link: </js/esbuild.worker.js>; rel=prefetch
   Link: </js/editor.worker.js>; rel=prefetch
   Link: </js/typescript.worker.js>; rel=prefetch
-  Link: </js/esbuild.worker.js>; rel=prefetch
 
 /**/*.css
   Cache-Control: public, max-age=604800, stale-while-revalidate=31536000

diff --git a/src/pug/index.pug b/src/pug/index.pug
@@ -1,7 +1,7 @@
 extends /layouts/layout.pug
 
 block preload
-  link(rel="stylesheet", href="./js/index.min.css")
+  link(rel="stylesheet", href="./js/monaco.min.css")
 
 block content
   input(type="text" id="copy-input" tabindex="-1" aria-hidden="true")