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

feat(replay): Allow to treeshake rrweb features #9274

Merged
merged 2 commits into from
Oct 19, 2023
Merged

Conversation

mydea
Copy link
Member

@mydea mydea commented Oct 17, 2023

This depends on getsentry/rrweb#114 to be merged first, but allows to configure build time flags to shake out certain rrweb features that may not be used.

It also adds a size limit entry that shows the total bundle size with everything that can be shaken out removed, incl. debug stuff. Bundle size is about ~11kb gzipped less in this scenario, which is not bad.

Copy link
Member

@Lms24 Lms24 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

11kb is impressive!

Comment on lines +20 to +22
__SENTRY_DEBUG__: false,
__RRWEB_EXCLUDE_CANVAS__: true,
__RRWEB_EXCLUDE_SHADOW_DOM__: true,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm kind of unfortunate that we have inverse semantics here to the __SENTRY_DEBUG__ flag but i actually prefer the verbose EXCLUDE naming pattern.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, I was/am also thinking about this - but IMHO for an opt-in behavior it's nicer to set this to true if I want to shake this out... 🤔 Maybe we can think about this for __SENTRY_DEBUG__ in v8 as well, make this __SENTRY_STRIP_DEBUG__: true or something like this..

@mydea mydea marked this pull request as ready for review October 18, 2023 13:18
@@ -34,6 +35,11 @@ export function makeBaseBundleConfig(options) {
const markAsBrowserBuildPlugin = makeBrowserBuildPlugin(true);
const licensePlugin = makeLicensePlugin(licenseTitle);
const tsPlugin = makeTSPlugin('es5');
const rrwebBuildPlugin = makeRrwebBuildPlugin({
excludeCanvas: false,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@billyvg should we exclude canvas right now for CDN bundles? 🤔

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah since we don't support playback. Makes sense to me

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@mydea mydea requested a review from billyvg October 18, 2023 13:26
@getsentry getsentry deleted a comment from github-actions bot Oct 18, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Oct 18, 2023

size-limit report 📦

Path Size
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped) 82.51 KB (-1.79% 🔽)
@sentry/browser (incl. Tracing) - Webpack (gzipped) 30.63 KB (-3.07% 🔽)
@sentry/browser - Webpack (gzipped) 21.24 KB (-2.47% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped) 73.01 KB (-9.31% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped) 28.68 KB (-2.9% 🔽)
@sentry/browser - ES6 CDN Bundle (gzipped) 21.07 KB (-2.94% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed) 233.76 KB (-4.85% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed) 87.08 KB (+1.7% 🔺)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed) 62.71 KB (+1.9% 🔺)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped) 31.44 KB (-3.72% 🔽)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped) 82.97 KB (-1.31% 🔽)
@sentry/react - Webpack (gzipped) 21.27 KB (-2.49% 🔽)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped) 99.38 KB (-2.77% 🔽)
@sentry/nextjs Client - Webpack (gzipped) 47.54 KB (-4.3% 🔽)
@sentry/browser (incl. Tracing, Replay) - Webpack with treeshaking flags (gzipped) 71.66 KB (added)

@mydea mydea merged commit aea3905 into develop Oct 19, 2023
85 checks passed
@mydea mydea deleted the fn/rrweb-build-flags branch October 19, 2023 08:20
@rchl
Copy link
Contributor

rchl commented Oct 31, 2023

I've tried to see how big of a difference it will make in a nuxt module where I'm importing @sentry/vue and I don't see any. It looks like the Replay's package/code is not included in the built bundle if the Replay integration is not used (imported). So then is this supposed to only have effect when Replay integration is imported? But then I would imagine it would not work?

EDIT: Well, I'm not importing whole @sentry/vue but only specific exports that I'm using. And as far as @sentry/browser I'm importing only @sentry/browser/esm/sdk (a bit of a hack to get the esm bundle).

@mydea
Copy link
Member Author

mydea commented Nov 2, 2023

So these flags will only impact the build output if replay is used. If replay is not used, all of it should already be shaken out!

@rchl
Copy link
Contributor

rchl commented Nov 2, 2023

Of course :) Thanks.

And I see that what those do exactly is documented at https://docs.sentry.io/platforms/javascript/configuration/tree-shaking/

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.

5 participants