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

Investigate reducing rrweb2 bundle size #8815

Closed
billyvg opened this issue Aug 14, 2023 · 4 comments
Closed

Investigate reducing rrweb2 bundle size #8815

billyvg opened this issue Aug 14, 2023 · 4 comments
Labels
Package: replay

Comments

@billyvg
Copy link
Member

billyvg commented Aug 14, 2023

No description provided.

@billyvg billyvg self-assigned this Aug 14, 2023
@AbhiPrasad
Copy link
Member

Copying my comment from the upgrade PR: #8760 (comment)

I skimmed over the rrweb codebase, there's some improvements that can be upstreamed. Looking at https://unpkg.com/rrweb@2.0.0-alpha.4/dist/rrweb.min.js some easy ones are to use terser and minify private class properties and convert some classes to objects.

So immediate investigation points:

Longer term points:

  • Identify what rrweb API we don't use and see if we can leverage build-time tools to tree-shake them out (like custom rollup plugin that aliases a certain files/functions).

@billyvg billyvg removed their assignment Sep 15, 2023
@billyvg
Copy link
Member Author

billyvg commented Sep 20, 2023

Ran rollup-bundle-analyzer on the replay package, here's what it looks like:

Image

We could make iframe/canvas recording as an explicit opt-in so that its managers are tree-shaken when not used. This shaves off about ~10% from the replay bundle size (minified, 190KB -> 170KB) (Though I haven't tested if rrweb works without these managers).

Image

@billyvg billyvg mentioned this issue Sep 27, 2023
Merged
billyvg added a commit that referenced this issue Sep 27, 2023
@billyvg
feat(replay): Upgrade to rrweb 2.0 (#8760)
398c6ba 
This is fully backwards compatible with prior versions of the Replay
SDK. The only breaking change that we will making is to not be masking
`aria-label` by default. The reason for this change is to align with our
core SDK which also does not mask `aria-label`. This change also enables
better support of searching by clicks.

Another change that needs to be highlighted is the 13% bundle size
increase. This bundle size increase is necessary to bring improved
recording performance and improved replay fidelity, especially in
regards to web components and iframes. We will be investigating the
reduction of the bundle size in [this
PR](#8815).

Here are benchmarks comparing the version 1 of rrweb to version 2

| metric    | v1         | v2         |
| --------- | ---------- | ---------- |
| lcp       | 1486.06 ms | 1529.11 ms |
| cls       | 0.40 ms    | 0.40 ms    |
| fid       | 1.53 ms    | 1.50 ms    |
| tbt       | 3207.22 ms | 3036.80 ms |
| memoryAvg | 131.83 MB  | 124.84 MB  |
| memoryMax | 324.8 MB   | 339.03 MB  |
| netTx     | 282.67 KB  | 272.51 KB  |
| netRx     | 8.02 MB    | 8.07 MB    |
c298lee pushed a commit that referenced this issue Sep 27, 2023
@billyvg @c298lee
feat(replay): Upgrade to rrweb 2.0 (#8760)
bab1849 
This is fully backwards compatible with prior versions of the Replay
SDK. The only breaking change that we will making is to not be masking
`aria-label` by default. The reason for this change is to align with our
core SDK which also does not mask `aria-label`. This change also enables
better support of searching by clicks.

Another change that needs to be highlighted is the 13% bundle size
increase. This bundle size increase is necessary to bring improved
recording performance and improved replay fidelity, especially in
regards to web components and iframes. We will be investigating the
reduction of the bundle size in [this
PR](#8815).

Here are benchmarks comparing the version 1 of rrweb to version 2

| metric    | v1         | v2         |
| --------- | ---------- | ---------- |
| lcp       | 1486.06 ms | 1529.11 ms |
| cls       | 0.40 ms    | 0.40 ms    |
| fid       | 1.53 ms    | 1.50 ms    |
| tbt       | 3207.22 ms | 3036.80 ms |
| memoryAvg | 131.83 MB  | 124.84 MB  |
| memoryMax | 324.8 MB   | 339.03 MB  |
| netTx     | 282.67 KB  | 272.51 KB  |
| netRx     | 8.02 MB    | 8.07 MB    |
@bruno-garcia
Copy link
Member

With the work done by @mydea and https://sentry.engineering/blog/session-replay-sdk-bundle-size-optimizations
can we close this or more we can do?

@mydea
Copy link
Member

mydea commented Nov 20, 2023

Yes! 🎉

@mydea mydea closed this as completed Nov 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Package: replay
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@billyvg @bruno-garcia @mydea @AbhiPrasad