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

View file

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

View file

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

View file

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

View file

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

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}