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.

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

chore: use code-splitting techniques #294

Merged
merged 4 commits into from
May 27, 2024

Conversation

Odonno
Copy link
Contributor

@Odonno Odonno commented May 24, 2024

Use code-splitting techniques to reduce initial bundle size and to improve startup time performance.

Improvements made:

  • lazy import page components (Query view, Explorer view, etc...)
  • lazy import of modules, like lottie-web. It will be fetched on the main page but after the initial bundles
  • lazy import json animated data for lottie

Some notes:

  • elk can be loaded via web worker, but as it is currently lazy imported when needed, I don't see the need for this
  • bundle size reduced by using lottie-light instead of lottie-web, from 7.27MB to 7.04MB (1.83MB -> 1.79MB gzip)
  • some vendors cannot be easily lazy imported (e.g. codemirror) => use manualChunks to split each bundle
  • splitting in chunks can improve load times by preloading modules in parallel instead of waiting for a single large chunk
  • vendor bundles could be cached, if no version upgrade
  • set experimentalMinChunkSize to 5000, having too many small chunks can be bad

Remaining:

  • icons.tsx are not splitted, should break icon per each file

Before:

before
before-bundle-size

After:

after
after-bundle-size

@Odonno Odonno marked this pull request as ready for review May 25, 2024 12:02
@Odonno Odonno requested a review from macjuul as a code owner May 25, 2024 12:02
@macjuul
Copy link
Contributor

macjuul commented May 27, 2024

Looks good, thanks!

@macjuul macjuul merged commit 90704f3 into surrealdb:main May 27, 2024
1 check passed
@Odonno Odonno deleted the chore/code-splitting branch May 27, 2024 09:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants