Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Optimize JS bundles #176

Open
MadLittleMods opened this issue Apr 21, 2023 · 1 comment
Open

Optimize JS bundles #176

MadLittleMods opened this issue Apr 21, 2023 · 1 comment
Labels
A-performance What is slow, what made it faster and more efficient? T-Enhancement New feature or request

Comments

@MadLittleMods
Copy link
Contributor

MadLittleMods commented Apr 21, 2023 •
edited

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:
@MadLittleMods MadLittleMods added T-Enhancement New feature or request A-performance What is slow, what made it faster and more efficient? labels Apr 21, 2023
This was referenced Apr 21, 2023
Closed
Merged
MadLittleMods added a commit that referenced this issue Apr 25, 2023
@MadLittleMods
Production ready build (#175)
9c0b6fe 
 - Rename `public` -> `client` so it doesn't get copied automagically as-is (without hashes which we want for cache busting), https://vitejs.dev/guide/assets.html#the-public-directory
     - We still build the version files to `public/` so their copied as-is and Vite handles it for us (so we can use `emptyOutDir`) 
 - Use a multiple entrypoint `.js` Vite build so things can be more intelligently bundled and take less time
     - We aren't using library mode because it doesn't minify or bundle assets
 - Using hash asset tags for cache busting. Hash of the file included in the file name
 - We lookup these hashed assets from `manifest.json` that Vite builds (https://vitejs.dev/guide/backend-integration.html) to serve and preload
 - In terms of optimized bundles, I know the current output isn't great now but will have to opt to fix that up separately in the future. Tracked by #176
@MadLittleMods
Copy link
Contributor Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
A-performance What is slow, what made it faster and more efficient? T-Enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@MadLittleMods