Lazy load highlight.js

This significantly reduces the bundle size(over 1MiB!) but it also uses
some hacks to dynamically load browserify modules on runtime(see
lazy-load-modules.js

build.js

@@ -145,9 +145,11 @@ async function addJS(sourcePath, targetPath) {
 	await fs.promises.writeFile(pj(buildDir, targetPath), content)
 }
 
-async function addBundle(sourcePath, targetPath) {
+async function addBundle(sourcePath, targetPath, module = false) {
+	let opts = {}
+	if(module) opts.standalone = sourcePath
 	const content = await new Promise(resolve => {
-		browserify()
+		browserify([], opts)
 			.add(pj(".", sourcePath))
 			.transform(file => {
 				let content = ""
@@ -287,6 +289,9 @@ async function addBabel(sourcePath, targetPath) {
 			await addPug(item.source, item.target)
 		} else if (item.type === "bundle") {
 			await addBundle(item.source, item.target)
+		} else if (item.type === "module") {
+			// Creates a standalone bundle that can be imported on runtime
+			await addBundle(item.source, item.target, true)
 		} else {
 			throw new Error("Unknown item type: "+item.type)
 		}

spec.js

@@ -19,6 +19,11 @@ module.exports = [
 		source: "/js/main.js",
 		target: "/static/bundle.js"
 	},
+	{
+		type: "module",
+		source: "/js/hljs.js",
+		target: "/static/hljs.js"
+	},
 	{
 		type: "file",
 		source: "/assets/fonts/whitney-500.woff",

src/home.pug

@@ -40,6 +40,7 @@ html
       != JSON.stringify([...static.keys()].map(k => [k, getStatic(k)]))
       | )
     link(rel="stylesheet" type="text/css" href=getStatic("/sass/main.sass"))
+    link(rel="preload" as="script" href=getStatic("/js/hljs.js"))
     script(type="module" src=getStatic("/js/main.js"))
   body
     main.main

src/js/events/components.js

@@ -1,10 +1,10 @@
 const {ElemJS} = require("../basic")
-const hljs = require("highlight.js")
+const {lazyLoad} = require("../lazy-load-module")
 
 class HighlightedCode extends ElemJS {
 	constructor(code) {
 		super(code)
-		hljs.highlightBlock(this.element)
+		lazyLoad("/static/hljs.js").then(hljs => hljs.highlightBlock(this.element))
 	}
 }
 

src/js/events/message.js

@@ -1,5 +1,4 @@
 const {ejs, ElemJS} = require("../basic")
-const hljs = require("highlight.js")
 const {HighlightedCode} = require("./components")
 const DOMPurify = require("dompurify")
 const {resolveMxc} = require("../functions")

src/js/hljs.js

@@ -0,0 +1,2 @@
+const hljs = require("highlight.js")
+module.exports = hljs

src/js/lazy-load-module.js

@@ -0,0 +1,19 @@
+// I hate this with passion
+async function lazyLoad(url) {
+	const cache = window.lazy_load_cache || new Map()
+	if (cache.get(url)) return cache.get(url)
+
+	const module = loadModuleWithoutCache(url)
+	cache.set(url, module)
+	return module
+}
+
+// Loads the module without caching
+async function loadModuleWithoutCache(url) {
+	const src = await fetch(url).then(r => r.text())
+	let module = {}
+	eval(src)
+	return module.exports
+}
+
+module.exports = {lazyLoad}