Currently, when we run yarn to build the dist/index.html, we're inlining all the JavaScript, CSS, and FontAwesome/KaTeX fonts into one massive dist/index.html file.
However, this isn't very efficient, since the fonts are stored in the dist/index.html file as base64, which adds a lot of storage and parsing time.
Disabling this makes the code about 10% faster for me (tests run in 110s instead of 120s), and the size on the bundle went from 4MiB to 3.5MiB.
:straight_ruler: Design Decisions
We were previously using the vite-plugin-singlefile tool, since Puppeteer can't import ESM JavaScript modules, which the @mermaid-js/mermaid-zenuml package is.
However, I wrote a super tiny Vite plugin to output all JavaScript in the IIFE format (and changed index.html to import the file as an IFFE), and it all seems to work fine!
:bookmark_tabs: Summary
Currently, when we run
yarnto build thedist/index.html, we're inlining all the JavaScript, CSS, and FontAwesome/KaTeX fonts into one massivedist/index.htmlfile.However, this isn't very efficient, since the fonts are stored in the
dist/index.htmlfile as base64, which adds a lot of storage and parsing time.Disabling this makes the code about 10% faster for me (tests run in 110s instead of 120s), and the size on the bundle went from 4MiB to 3.5MiB.
:straight_ruler: Design Decisions
We were previously using the
vite-plugin-singlefiletool, since Puppeteer can't import ESM JavaScript modules, which the@mermaid-js/mermaid-zenumlpackage is.However, I wrote a super tiny Vite plugin to output all JavaScript in the IIFE format (and changed
index.htmlto import the file as an IFFE), and it all seems to work fine!npm packoutputBefore
One massive
dist/index.htmlfile that is4.8 MB!After
Lots of small
dist/asserts/*font files that take up less space overall.:clipboard: Tasks
Make sure you
masterbranch