From 3458cadd1ee5245c04b9485ddbb5ea15df9f1ec0 Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Wed, 14 Aug 2019 19:19:51 -0400 Subject: [PATCH 01/11] Attempt to achieve prefetch for workers --- src/template.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/template.html b/src/template.html index 162c5c916..577dfc4a4 100644 --- a/src/template.html +++ b/src/template.html @@ -22,6 +22,9 @@ <% if (webpack.assets.filter(entry => entry.name.match(/bundle.\w{5}.esm.js$/)).length > 0) { %> <% } %> + <% for (const file of webpack.assets.filter(entry => entry.name.match(/\.worker\.js$/))) { %> + + <% } %> From ec5d075ffd0a942c2897e0f135e9c7005dbbfa23 Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Wed, 14 Aug 2019 20:27:52 -0400 Subject: [PATCH 02/11] try without esm so the worker urls dont duplicate --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f0bf2bd1a..ea40f45ab 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "start": "npm run -s server", "prestart": "npm run -s build", "server": "superstatic build -p ${PORT:-8080} --host 0.0.0.0 --gzip -c '{\"rewrites\": [{\"source\":\"**\",\"destination\":\"index.html\"}],\"headers\":[{\"source\":\"**\",\"headers\":[{\"key\":\"Cache-Control\",\"value\":\"max-age=31536000\"}]}]}'", - "build": "preact build --prerenderUrls src/prerender.js --template src/template.html", + "build": "preact build --no-esm --prerenderUrls src/prerender.js --template src/template.html", "postbuild": "cat src/_headers >> build/_headers", "prebuild": "rm -rf build/assets build/content && mkdir -p build", "pretest": "npm run -s lint && npm run -s build", From f340dc6271a21d37ca8f16d3802c13d3940e524c Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Wed, 14 Aug 2019 20:29:22 -0400 Subject: [PATCH 03/11] exclude repl from prefetch --- src/template.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/template.html b/src/template.html index 577dfc4a4..daa1b3177 100644 --- a/src/template.html +++ b/src/template.html @@ -22,7 +22,7 @@ <% if (webpack.assets.filter(entry => entry.name.match(/bundle.\w{5}.esm.js$/)).length > 0) { %> <% } %> - <% for (const file of webpack.assets.filter(entry => entry.name.match(/\.worker\.js$/))) { %> + <% for (const file of webpack.assets.filter(entry => entry.name.match(/(markdown|prism)\..*\.worker\.js$/))) { %> <% } %> From f0e78d42704db2e38c76aeda4e4b0f908c1cf4d6 Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Wed, 14 Aug 2019 20:33:15 -0400 Subject: [PATCH 04/11] crossorigin --- src/template.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/template.html b/src/template.html index daa1b3177..db58bdeea 100644 --- a/src/template.html +++ b/src/template.html @@ -23,7 +23,7 @@ <% } %> <% for (const file of webpack.assets.filter(entry => entry.name.match(/(markdown|prism)\..*\.worker\.js$/))) { %> - + <% } %> From 7d69b19788538f846b8254e92a8067b33d7d2148 Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Wed, 14 Aug 2019 20:46:40 -0400 Subject: [PATCH 05/11] more trials. --- src/template.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/template.html b/src/template.html index db58bdeea..e9b18fcd6 100644 --- a/src/template.html +++ b/src/template.html @@ -23,7 +23,7 @@ <% } %> <% for (const file of webpack.assets.filter(entry => entry.name.match(/(markdown|prism)\..*\.worker\.js$/))) { %> - + <% } %> From 7e81ab29d04cd2a552ea2d324bf6ef63b5285bc4 Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Fri, 23 Aug 2019 13:14:35 -0400 Subject: [PATCH 06/11] remove unused window script --- src/components/controllers/repl/window.js | 2 -- 1 file changed, 2 deletions(-) delete mode 100644 src/components/controllers/repl/window.js diff --git a/src/components/controllers/repl/window.js b/src/components/controllers/repl/window.js deleted file mode 100644 index 0aff240f2..000000000 --- a/src/components/controllers/repl/window.js +++ /dev/null @@ -1,2 +0,0 @@ -// fix babel debug reference -global.window = global; From aaf1ce651358611dad67edcb330b4110216d7631 Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Fri, 23 Aug 2019 15:49:48 -0400 Subject: [PATCH 07/11] worker prefetching! --- package-lock.json | 8 ++++---- package.json | 2 +- size-plugin-browser.json | 2 +- size-plugin-ssr.json | 2 +- src/components/code-block/index.js | 2 +- src/lib/content.js | 2 +- src/template.html | 2 +- 7 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index e61b982c9..485dc2dee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20241,12 +20241,12 @@ } }, "workerize-loader": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/workerize-loader/-/workerize-loader-1.0.4.tgz", - "integrity": "sha512-HMTr/zpuZhm8dbhcK52cMYmn57uf7IJeMZJil+5lL/vC5+AO9wzxZ0FISkGVj78No7HcpaINwAWHGCYx3dnsTw==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/workerize-loader/-/workerize-loader-1.1.0.tgz", + "integrity": "sha512-cU2jPVE3AzzVxOonBe9lCCO//qwE9s/K4a9njFVRLueznzNDNND5vGHVorGuzK6xvamdDOZ9+g7CPIc7QKzucQ==", "dev": true, "requires": { - "loader-utils": "^1.1.0" + "loader-utils": "^1.2.3" } }, "wrap-ansi": { diff --git a/package.json b/package.json index 2247c09cb..42d467876 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,7 @@ "prettier": "^1.18.2", "puppeteer": "^1.19.0", "size-plugin": "^2.0.0", - "workerize-loader": "^1.0.4" + "workerize-loader": "^1.1.0" }, "dependencies": { "babel-standalone": "^6.26.0", diff --git a/size-plugin-browser.json b/size-plugin-browser.json index edbd1d7c8..2b64935e2 100644 --- a/size-plugin-browser.json +++ b/size-plugin-browser.json @@ -1 +1 @@ -[{"timestamp":1566495912208,"files":[{"filename":"ssr-build/editor.chunk.51cc7.css","previous":3174,"size":0,"diff":-3174},{"filename":"ssr-build/editor.chunk.907a2.js","previous":65855,"size":0,"diff":-65855},{"filename":"ssr-build/emoji.chunk.a7ea4.js","previous":8834,"size":0,"diff":-8834},{"filename":"ssr-build/markdown.e0970.worker.js","previous":8612,"size":0,"diff":-8612},{"filename":"ssr-build/prism.28075.worker.js","previous":6244,"size":0,"diff":-6244},{"filename":"ssr-build/repl.dde27.worker.js","previous":37054,"size":0,"diff":-37054},{"filename":"ssr-build/runner.chunk.82e44.js","previous":5856,"size":0,"diff":-5856},{"filename":"ssr-build/ssr-bundle.6d789.css","previous":10829,"size":0,"diff":-10829},{"filename":"ssr-build/ssr-bundle.js","previous":27557,"size":0,"diff":-27557},{"filename":"sw-esm.js","previous":0,"size":682,"diff":682},{"filename":"sw.js","previous":0,"size":678,"diff":678},{"filename":"markdown.bc303.worker.js","previous":0,"size":8681,"diff":8681},{"filename":"prism.18eb5.worker.js","previous":0,"size":6256,"diff":6256},{"filename":"repl.ed003.worker.js","previous":0,"size":35099,"diff":35099},{"filename":"bundle.51cd1.css","previous":0,"size":9071,"diff":9071},{"filename":"bundle.bd43d.esm.js","previous":0,"size":22857,"diff":22857},{"filename":"editor.chunk.51cc7.css","previous":0,"size":2154,"diff":2154},{"filename":"editor.chunk.d5373.esm.js","previous":0,"size":66307,"diff":66307},{"filename":"emoji.chunk.91398.esm.js","previous":0,"size":8854,"diff":8854},{"filename":"polyfills.6a525.esm.js","previous":0,"size":2128,"diff":2128},{"filename":"runner.chunk.7e9f0.esm.js","previous":0,"size":5789,"diff":5789},{"filename":"5.chunk.275db.css","previous":0,"size":1467,"diff":1467},{"filename":"5.chunk.d0b78.esm.js","previous":0,"size":3387,"diff":3387},{"filename":"markdown.8ff2c.worker.js","previous":0,"size":8682,"diff":8682},{"filename":"repl.80e6e.worker.js","previous":0,"size":36553,"diff":36553},{"filename":"bundle.137bc.js","previous":0,"size":23223,"diff":23223},{"filename":"editor.chunk.7148e.js","previous":0,"size":66352,"diff":66352},{"filename":"emoji.chunk.1ed91.js","previous":0,"size":8848,"diff":8848},{"filename":"polyfills.3233a.js","previous":0,"size":2124,"diff":2124},{"filename":"runner.chunk.ca897.js","previous":0,"size":5830,"diff":5830},{"filename":"5.chunk.50f21.js","previous":0,"size":3451,"diff":3451}]}] +[{"timestamp":1566580647558,"files":[{"filename":"sw-esm.js","previous":682,"size":0,"diff":-682},{"filename":"sw.js","previous":678,"size":672,"diff":-6},{"filename":"markdown.bc303.worker.js","previous":8681,"size":0,"diff":-8681},{"filename":"prism.18eb5.worker.js","previous":6256,"size":0,"diff":-6256},{"filename":"repl.ed003.worker.js","previous":35099,"size":0,"diff":-35099},{"filename":"bundle.51cd1.css","previous":9071,"size":0,"diff":-9071},{"filename":"bundle.bd43d.esm.js","previous":22857,"size":0,"diff":-22857},{"filename":"editor.chunk.51cc7.css","previous":2154,"size":0,"diff":-2154},{"filename":"editor.chunk.d5373.esm.js","previous":66307,"size":0,"diff":-66307},{"filename":"emoji.chunk.91398.esm.js","previous":8854,"size":0,"diff":-8854},{"filename":"polyfills.6a525.esm.js","previous":2128,"size":0,"diff":-2128},{"filename":"runner.chunk.7e9f0.esm.js","previous":5789,"size":0,"diff":-5789},{"filename":"5.chunk.275db.css","previous":1467,"size":0,"diff":-1467},{"filename":"5.chunk.d0b78.esm.js","previous":3387,"size":0,"diff":-3387},{"filename":"markdown.8ff2c.worker.js","previous":8682,"size":0,"diff":-8682},{"filename":"repl.80e6e.worker.js","previous":36553,"size":0,"diff":-36553},{"filename":"bundle.137bc.js","previous":23223,"size":0,"diff":-23223},{"filename":"editor.chunk.7148e.js","previous":66352,"size":0,"diff":-66352},{"filename":"emoji.chunk.1ed91.js","previous":8848,"size":0,"diff":-8848},{"filename":"polyfills.3233a.js","previous":2124,"size":0,"diff":-2124},{"filename":"runner.chunk.ca897.js","previous":5830,"size":0,"diff":-5830},{"filename":"5.chunk.50f21.js","previous":3451,"size":0,"diff":-3451},{"filename":"prism.5e280.worker.js","previous":0,"size":6256,"diff":6256},{"filename":"markdown.0ff4e.worker.js","previous":0,"size":8681,"diff":8681},{"filename":"repl.59cdc.worker.js","previous":0,"size":36548,"diff":36548},{"filename":"bundle.0dfb4.css","previous":0,"size":9073,"diff":9073},{"filename":"bundle.*****.js","previous":0,"size":23314,"diff":23314},{"filename":"editor.chunk.cc117.css","previous":0,"size":2154,"diff":2154},{"filename":"editor.chunk.*****.js","previous":0,"size":66352,"diff":66352},{"filename":"emoji.chunk.*****.js","previous":0,"size":8848,"diff":8848},{"filename":"polyfills.*****.js","previous":0,"size":2124,"diff":2124},{"filename":"runner.chunk.*****.js","previous":0,"size":5830,"diff":5830},{"filename":"5.chunk.61a1b.css","previous":0,"size":1467,"diff":1467},{"filename":"5.chunk.*****.js","previous":0,"size":3452,"diff":3452}]},{"timestamp":1566495912208,"files":[{"filename":"ssr-build/editor.chunk.51cc7.css","previous":3174,"size":0,"diff":-3174},{"filename":"ssr-build/editor.chunk.907a2.js","previous":65855,"size":0,"diff":-65855},{"filename":"ssr-build/emoji.chunk.a7ea4.js","previous":8834,"size":0,"diff":-8834},{"filename":"ssr-build/markdown.e0970.worker.js","previous":8612,"size":0,"diff":-8612},{"filename":"ssr-build/prism.28075.worker.js","previous":6244,"size":0,"diff":-6244},{"filename":"ssr-build/repl.dde27.worker.js","previous":37054,"size":0,"diff":-37054},{"filename":"ssr-build/runner.chunk.82e44.js","previous":5856,"size":0,"diff":-5856},{"filename":"ssr-build/ssr-bundle.6d789.css","previous":10829,"size":0,"diff":-10829},{"filename":"ssr-build/ssr-bundle.js","previous":27557,"size":0,"diff":-27557},{"filename":"sw-esm.js","previous":0,"size":682,"diff":682},{"filename":"sw.js","previous":0,"size":678,"diff":678},{"filename":"markdown.bc303.worker.js","previous":0,"size":8681,"diff":8681},{"filename":"prism.18eb5.worker.js","previous":0,"size":6256,"diff":6256},{"filename":"repl.ed003.worker.js","previous":0,"size":35099,"diff":35099},{"filename":"bundle.51cd1.css","previous":0,"size":9071,"diff":9071},{"filename":"bundle.bd43d.esm.js","previous":0,"size":22857,"diff":22857},{"filename":"editor.chunk.51cc7.css","previous":0,"size":2154,"diff":2154},{"filename":"editor.chunk.d5373.esm.js","previous":0,"size":66307,"diff":66307},{"filename":"emoji.chunk.91398.esm.js","previous":0,"size":8854,"diff":8854},{"filename":"polyfills.6a525.esm.js","previous":0,"size":2128,"diff":2128},{"filename":"runner.chunk.7e9f0.esm.js","previous":0,"size":5789,"diff":5789},{"filename":"5.chunk.275db.css","previous":0,"size":1467,"diff":1467},{"filename":"5.chunk.d0b78.esm.js","previous":0,"size":3387,"diff":3387},{"filename":"markdown.8ff2c.worker.js","previous":0,"size":8682,"diff":8682},{"filename":"repl.80e6e.worker.js","previous":0,"size":36553,"diff":36553},{"filename":"bundle.137bc.js","previous":0,"size":23223,"diff":23223},{"filename":"editor.chunk.7148e.js","previous":0,"size":66352,"diff":66352},{"filename":"emoji.chunk.1ed91.js","previous":0,"size":8848,"diff":8848},{"filename":"polyfills.3233a.js","previous":0,"size":2124,"diff":2124},{"filename":"runner.chunk.ca897.js","previous":0,"size":5830,"diff":5830},{"filename":"5.chunk.50f21.js","previous":0,"size":3451,"diff":3451}]}] diff --git a/size-plugin-ssr.json b/size-plugin-ssr.json index e4143d4cd..698b4be33 100644 --- a/size-plugin-ssr.json +++ b/size-plugin-ssr.json @@ -1 +1 @@ -[{"timestamp":1566495874422,"files":[{"filename":"markdown.e0970.worker.js","previous":0,"size":8612,"diff":8612},{"filename":"prism.28075.worker.js","previous":0,"size":6244,"diff":6244},{"filename":"repl.dde27.worker.js","previous":0,"size":37054,"diff":37054},{"filename":"editor.chunk.51cc7.css","previous":0,"size":3174,"diff":3174},{"filename":"editor.chunk.*****.js","previous":0,"size":65855,"diff":65855},{"filename":"emoji.chunk.*****.js","previous":0,"size":8834,"diff":8834},{"filename":"runner.chunk.*****.js","previous":0,"size":5856,"diff":5856},{"filename":"ssr-bundle.6d789.css","previous":0,"size":10829,"diff":10829},{"filename":"ssr-bundle.js","previous":0,"size":27557,"diff":27557}]}] +[{"timestamp":1566580628865,"files":[{"filename":"markdown.e0970.worker.js","previous":8612,"size":0,"diff":-8612},{"filename":"prism.28075.worker.js","previous":6244,"size":0,"diff":-6244},{"filename":"repl.dde27.worker.js","previous":37054,"size":0,"diff":-37054},{"filename":"editor.chunk.51cc7.css","previous":3174,"size":0,"diff":-3174},{"filename":"editor.chunk.*****.js","previous":65855,"size":65855,"diff":0},{"filename":"emoji.chunk.*****.js","previous":8834,"size":8834,"diff":0},{"filename":"runner.chunk.*****.js","previous":5856,"size":5854,"diff":-2},{"filename":"ssr-bundle.6d789.css","previous":10829,"size":0,"diff":-10829},{"filename":"ssr-bundle.js","previous":27557,"size":27640,"diff":83},{"filename":"prism.cb930.worker.js","previous":0,"size":6243,"diff":6243},{"filename":"markdown.7436b.worker.js","previous":0,"size":8613,"diff":8613},{"filename":"repl.6be8a.worker.js","previous":0,"size":37049,"diff":37049},{"filename":"editor.chunk.cc117.css","previous":0,"size":3174,"diff":3174},{"filename":"ssr-bundle.319a3.css","previous":0,"size":10828,"diff":10828}]},{"timestamp":1566495874422,"files":[{"filename":"markdown.e0970.worker.js","previous":0,"size":8612,"diff":8612},{"filename":"prism.28075.worker.js","previous":0,"size":6244,"diff":6244},{"filename":"repl.dde27.worker.js","previous":0,"size":37054,"diff":37054},{"filename":"editor.chunk.51cc7.css","previous":0,"size":3174,"diff":3174},{"filename":"editor.chunk.*****.js","previous":0,"size":65855,"diff":65855},{"filename":"emoji.chunk.*****.js","previous":0,"size":8834,"diff":8834},{"filename":"runner.chunk.*****.js","previous":0,"size":5856,"diff":5856},{"filename":"ssr-bundle.6d789.css","previous":0,"size":10829,"diff":10829},{"filename":"ssr-bundle.js","previous":0,"size":27557,"diff":27557}]}] diff --git a/src/components/code-block/index.js b/src/components/code-block/index.js index 17d37706c..0024a45a4 100644 --- a/src/components/code-block/index.js +++ b/src/components/code-block/index.js @@ -1,7 +1,7 @@ import { useState, useMemo, useRef, useEffect } from 'preact/hooks'; import { Link } from 'preact-router'; import cx from '../../lib/cx'; -import PrismWorker from 'workerize-loader?name=prism.[hash:5]!./prism.worker'; +import PrismWorker from 'workerize-loader?import&name=prism.[hash:5]!./prism.worker'; // @TODO this should work in development, but Preact CLI transforms to CommonJS. const { highlight } = diff --git a/src/lib/content.js b/src/lib/content.js index 5b1c37a93..7d4d5cf0e 100644 --- a/src/lib/content.js +++ b/src/lib/content.js @@ -1,4 +1,4 @@ -import MarkedWorker from 'workerize-loader?name=markdown.[hash:5]!./marked.worker'; +import MarkedWorker from 'workerize-loader?import&name=markdown.[hash:5]!./marked.worker'; // Find YAML FrontMatter preceeding a markdown document const FRONT_MATTER_REG = /^\s*---\n\s*([\s\S]*?)\s*\n---\n/i; diff --git a/src/template.html b/src/template.html index e9b18fcd6..66a6b4e64 100644 --- a/src/template.html +++ b/src/template.html @@ -23,7 +23,7 @@ <% } %> <% for (const file of webpack.assets.filter(entry => entry.name.match(/(markdown|prism)\..*\.worker\.js$/))) { %> - + <% } %> From e553fd6cd2fc24d8f78ee5b35b18441b69ee52e9 Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Mon, 26 Aug 2019 10:04:08 -0400 Subject: [PATCH 08/11] try non-crossorigin preconnect for jsdelivr --- src/template.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/template.html b/src/template.html index 93a8e64a7..799e134a3 100644 --- a/src/template.html +++ b/src/template.html @@ -27,7 +27,7 @@ <% } %> - + <%= htmlWebpackPlugin.options.ssr({ From 5b47682a4d85f2f374677051f0cb92600bf11189 Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Mon, 26 Aug 2019 10:18:34 -0400 Subject: [PATCH 09/11] github preconnect too --- src/template.html | 1 + 1 file changed, 1 insertion(+) diff --git a/src/template.html b/src/template.html index 799e134a3..34ee17852 100644 --- a/src/template.html +++ b/src/template.html @@ -28,6 +28,7 @@ <% } %> + <%= htmlWebpackPlugin.options.ssr({ From 2581ba62c1d37981cde6e0edb8a636a114c87309 Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Thu, 29 Aug 2019 16:40:09 -0400 Subject: [PATCH 10/11] add polyfills to markdown worker --- src/lib/marked.worker.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/marked.worker.js b/src/lib/marked.worker.js index ab6d3cac8..6ad5c1175 100644 --- a/src/lib/marked.worker.js +++ b/src/lib/marked.worker.js @@ -1,3 +1,4 @@ +import 'preact-cli/lib/lib/webpack/polyfills'; import marked from 'marked'; export function convert(markdown) { From a0bab4e41a86e16fb432aef8c6aadc0d279c752c Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Thu, 29 Aug 2019 16:42:26 -0400 Subject: [PATCH 11/11] add polyfills to prism worker --- src/components/code-block/prism.worker.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/code-block/prism.worker.js b/src/components/code-block/prism.worker.js index 38f9c4254..fe8b98b57 100644 --- a/src/components/code-block/prism.worker.js +++ b/src/components/code-block/prism.worker.js @@ -1,3 +1,4 @@ +import 'preact-cli/lib/lib/webpack/polyfills'; import * as prism from '../../lib/prism'; export function highlight(code, lang) {