From 0222b706a807e28e4bd5ce22e99d8bb9b45f640d Mon Sep 17 00:00:00 2001 From: Okiki Date: Fri, 17 Sep 2021 06:41:27 +0000 Subject: [PATCH] feat: preload monaco.min.js for faster perfs; reenable treeshaking --- gulpfile.js | 44 +++++++++++++++++++++++++++--------- package.json | 1 + pnpm-lock.yaml | 54 +++++++++++++++++++++++++++++++++++++++++++++ src/assets/_headers | 8 ++++--- src/pug/index.pug | 2 +- 5 files changed, 95 insertions(+), 14 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 5cb525fa..1a8d4f7b 100644 --- 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,7 +114,10 @@ task("js", async () => { { WEB_WORKER }, { solidPlugin: solid }, - { default: rename } + { default: rename }, + + { default: replace }, + { basename } ] = await Promise.all([ import("gulp-esbuild"), import("gulp-size"), @@ -122,16 +125,21 @@ task("js", async () => { 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 index bfbc6903..22e5b24b 100644 --- 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 index aebbad02..6a4def31 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -30,6 +30,7 @@ specifiers: 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 highlight.js: ^11.2.0 @@ -96,6 +97,7 @@ devDependencies: gulp-postcss: 9.0.1_postcss@8.3.6 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_gulp@4.0.2 husky: 7.0.2 @@ -627,6 +629,10 @@ packages: path-to-regexp: 6.2.0 dev: false + /@types/expect/1.20.4: + resolution: {integrity: sha512-Q5Vn3yjTDyCMV50TB6VRIbQNxSE4OmZR86VSbGaNpfUolm0iePBB4KdEEHmxoY5sT2+2DIvXW0rvMDP2nHZ4Mg==} + dev: true + /@types/minimatch/3.0.5: resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==} dev: true @@ -635,6 +641,10 @@ packages: resolution: {integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==} dev: true + /@types/node/14.17.17: + resolution: {integrity: sha512-niAjcewgEYvSPCZm3OaM9y6YQrL2SEPH9PymtE6fuZAvFiP6ereCcvApGl2jKTq7copTIguX3PBvfP08LN4LvQ==} + dev: true + /@types/node/16.9.2: resolution: {integrity: sha512-ZHty/hKoOLZvSz6BtP1g7tc7nUeJhoCf3flLjh8ZEv1vFKBWHXcnMbJMyN/pftSljNyy0kNW/UqI3DccnBnZ8w==} dev: true @@ -647,6 +657,13 @@ packages: resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==} dev: true + /@types/vinyl/2.0.6: + resolution: {integrity: sha512-ayJ0iOCDNHnKpKTgBG6Q6JOnHTj9zFta+3j2b8Ejza0e4cvRyMn0ZoLEmbPrTHe5YYRlDYPvPWVdV4cTaRyH7g==} + dependencies: + '@types/expect': 1.20.4 + '@types/node': 16.9.2 + dev: true + /Base64/0.2.1: resolution: {integrity: sha1-ujpCMHCOGGcFBl5mur3Uw1z2ACg=} dev: false @@ -1128,6 +1145,11 @@ packages: engines: {node: '>=8'} dev: true + /binaryextensions/2.3.0: + resolution: {integrity: sha512-nAihlQsYGyc5Bwq6+EsubvANYGExeJKHDO3RjnvwU042fawQTQfM3Kxn7IHUXQOz4bzfwsGYYHGSvXyW4zOGLg==} + engines: {node: '>=0.8'} + dev: true + /bindings/1.5.0: resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==} requiresBuild: true @@ -3313,6 +3335,17 @@ packages: engines: {node: '>=4'} dev: true + /gulp-replace/1.1.3: + resolution: {integrity: sha512-HcPHpWY4XdF8zxYkDODHnG2+7a3nD/Y8Mfu3aBgMiCFDW3X2GiOKXllsAmILcxe3KZT2BXoN18WrpEFm48KfLQ==} + engines: {node: '>=10'} + dependencies: + '@types/node': 14.17.17 + '@types/vinyl': 2.0.6 + istextorbinary: 3.3.0 + replacestream: 4.0.3 + yargs-parser: 20.2.9 + dev: true + /gulp-sitemap/8.0.0: resolution: {integrity: sha512-rXvje8NxCAXxis1aqwUEhDU8iWnLcda2Ky/Cn4g2iWjWzaKahZ6lXbVy+HzjtfMslmVY9ownKVFe4ADTINM+Jw==} engines: {node: '>=10'} @@ -4070,6 +4103,14 @@ packages: engines: {node: '>=0.10.0'} dev: true + /istextorbinary/3.3.0: + resolution: {integrity: sha512-Tvq1W6NAcZeJ8op+Hq7tdZ434rqnMx4CCZ7H0ff83uEloDvVbqAwaMTZcafKGJT0VHkYzuXUiCY4hlXQg6WfoQ==} + engines: {node: '>=8'} + dependencies: + binaryextensions: 2.3.0 + textextensions: 3.3.0 + dev: true + /js-stringify/1.0.2: resolution: {integrity: sha1-Fzb939lyTyijaCrcYjCufk6Weds=} dev: true @@ -5630,6 +5671,14 @@ packages: remove-trailing-separator: 1.1.0 dev: true + /replacestream/4.0.3: + resolution: {integrity: sha512-AC0FiLS352pBBiZhd4VXB1Ab/lh0lEgpP+GGvZqbQh8a5cmXVoTe5EX/YeTFArnp4SRGTHh1qCHu9lGs1qG8sA==} + dependencies: + escape-string-regexp: 1.0.5 + object-assign: 4.1.1 + readable-stream: 2.3.7 + dev: true + /require-directory/2.1.1: resolution: {integrity: sha1-jGStX9MNqxyXbiNE/+f3kqam30I=} engines: {node: '>=0.10.0'} @@ -6416,6 +6465,11 @@ packages: engines: {node: '>=0.10'} dev: true + /textextensions/3.3.0: + resolution: {integrity: sha512-mk82dS8eRABNbeVJrEiN5/UMSCliINAuz8mkUwH4SwslkNP//gbEzlWNS5au0z5Dpx40SQxzqZevZkn+WYJ9Dw==} + engines: {node: '>=8'} + dev: true + /tfunk/4.0.0: resolution: {integrity: sha512-eJQ0dGfDIzWNiFNYFVjJ+Ezl/GmwHaFTBTjrtqNPW0S7cuVDBrZrmzUz6VkMeCR4DZFqhd4YtLwsw3i2wYHswQ==} dependencies: diff --git a/src/assets/_headers b/src/assets/_headers index 4831b673..c79e0b4c 100644 --- a/src/assets/_headers +++ b/src/assets/_headers @@ -18,13 +18,15 @@ / Link: ; rel=preload; as=font; type=font/ttf; crossorigin - Link: ; rel=preload; as=style - Link: ; rel=modulepreload + Link: ; rel=preload; as=style Link: ; rel=preconnect; crossorigin + Link: ; rel=modulepreload + Link: ; rel=modulepreload Link: ; rel=modulepreload + Link: ; rel=prefetch + Link: ; rel=prefetch Link: ; rel=prefetch Link: ; rel=prefetch - Link: ; 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 index c91c08ad..f53a5a0c 100644 --- 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")