Optimize JS bundles
MadLittleMods opened this issue · comments
Related to #132
Bundle efficiency
Based on what I was seeing in #175 trying to get the bundles to work; I couldn't properly get the chunks working as I ideally wanted where each entry point would be bundled up with no chunks except for a vendor
chunk that included hydrogen-view-sdk
And I know the current chunking makes entry-client-room-alias-hash-redirect.js
inefficient by just making it small and pulling in a separate redirect-if-room-alias-in-hash
chunk which seems completely unnecessary and could be bundled into itself without an extra import.
Any combination of manualChunks
and experimentalMinChunkSize
options I tried with Vite just didn't do the trick.
Also see https://vitejs.dev/guide/build.html#chunking-strategy
Bundle size
The bundles seem pretty big at the moment and there is probably lots of opportunity to prune things down. Are we even tree-shaking?
Hopefully in #175, we figure out how to minify the JS.
Dev notes
A way to visualize JS bundles:
- DevTools: A better to way to visualize your JavaScript, https://umaar.com/dev-tips/270-devtools-lighthouse-treemap/ (direct link to YouTube)
From https://pagespeed.web.dev/analysis/https-archive-matrix-org/lcerqhz1xk?form_factor=mobile
Reduce unused JavaScript (1.05s estimated savings)
Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity. Learn how to reduce unused JavaScript. LCP
URL Transfer Size Potential Savings matrix.org 1st Party 179.0 KiB 163.5 KiB /assets/AvatarVie….js(archive.matrix.org)
179.0 KiB 163.5 KiB …node_modules/hydrogen-view-sdk/lib-build/hydrogen.cjs.js
159.3 KiB 148.5 KiB …node_modules/@matrix-org/olm/olm.js
10.9 KiB 10.8 KiB …node_modules/dompurify/dist/purify.js
5.6 KiB 2.6 KiB …node_modules/off-color/cjs/index.js
0.9 KiB 0.7 KiB