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
This commit is contained in:
Bad 2020-10-31 18:17:34 +01:00
parent 4d59b1a9ac
commit 20e94f05e7
7 changed files with 36 additions and 5 deletions

View file

@ -145,9 +145,11 @@ async function addJS(sourcePath, targetPath) {
await fs.promises.writeFile(pj(buildDir, targetPath), content) 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 => { const content = await new Promise(resolve => {
browserify() browserify([], opts)
.add(pj(".", sourcePath)) .add(pj(".", sourcePath))
.transform(file => { .transform(file => {
let content = "" let content = ""
@ -287,6 +289,9 @@ async function addBabel(sourcePath, targetPath) {
await addPug(item.source, item.target) await addPug(item.source, item.target)
} else if (item.type === "bundle") { } else if (item.type === "bundle") {
await addBundle(item.source, item.target) 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 { } else {
throw new Error("Unknown item type: "+item.type) throw new Error("Unknown item type: "+item.type)
} }

View file

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

View file

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

View file

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

View file

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

2
src/js/hljs.js Normal file
View file

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

View file

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