matrix-org / matrix-org/matrix-viewer

Optimize JS bundles

Open
#176 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

A-performance T-Enhancement
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:

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.