Attempt to achieve prefetch for workers

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",
@@ -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",

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}]}]

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}]}]

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 } =

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;

src/template.html

@@ -22,6 +22,9 @@
 		<% if (webpack.assets.filter(entry => entry.name.match(/bundle.\w{5}.esm.js$/)).length > 0) { %>
 			<script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
 		<% } %>
+		<% for (const file of webpack.assets.filter(entry => entry.name.match(/(markdown|prism)\..*\.worker\.js$/))) { %>
+			<link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file.name %>" as="script">
+		<% } %>
 		<script nomodule>window.fetch||document.write('<script src="<%= htmlWebpackPlugin.files.chunks.polyfills.entry %>"><\/script>')</script>
 		<link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin="anonymous">
 	</head>