matrix-org / matrix-org/matrix-viewer
Optimize JS bundles
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 84
- Forks
- 10
- PR merge metrics
- No merged PRs in 30d
Description
Related to https://github.com/matrix-org/matrix-public-archive/issues/132
Bundle efficiency
Based on what I was seeing in https://github.com/matrix-org/matrix-public-archive/pull/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 https://github.com/matrix-org/matrix-public-archive/pull/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)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with Vite's chunking strategy documentation and the current build configuration, then inspect the entry-client-room-alias-hash-redirect.js entry point and its redirect-if-room-alias-in-hash chunk. Compare the generated bundles for unnecessary chunks, minification, and tree-shaking; done means a documented, measured reduction in unnecessary chunks and bundle size.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, vite
- Domain
- build-system, performance
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100