build(replay): Generate Replay CDN bundles

.size-limit.js

@@ -63,10 +63,9 @@ module.exports = [
     gzip: true,
     limit: '100 KB',
   },
-  // This entry is only here temporarily and will be replaced once we have proper CDN bundles
   {
-    name: '@sentry/replay index.js',
-    path: 'packages/replay/build/npm/esm/index.js',
+    name: '@sentry/replay ES6 CDN Bundle (gzipped + minified)',
+    path: 'packages/replay/build/bundles/replay.min.js',
     gzip: true,
     limit: '100 KB',
     ignore: ['@sentry/browser', '@sentry/utils', '@sentry/core', '@sentry/types'],
@@ -79,12 +78,4 @@ module.exports = [
     limit: '100 KB',
     ignore: ['@sentry/browser', '@sentry/utils', '@sentry/core', '@sentry/types'],
   },
-  {
-    name: '@sentry/replay - Webpack (minified)',
-    path: 'packages/replay/build/npm/esm/index.js',
-    import: '{ Replay }',
-    gzip: false,
-    limit: '300 KB',
-    ignore: ['@sentry/browser', '@sentry/utils', '@sentry/core', '@sentry/types'],
-  },
 ];

packages/replay/package.json

@@ -7,14 +7,18 @@
   "types": "build/npm/types/index.d.ts",
   "sideEffects": false,
   "scripts": {
+    "build": "run-s build:worker && run-p build:core build:types build:bundle",
     "build:rollup": "run-s build:worker build:core",
-    "build": "run-s build:worker && run-p build:core build:types",
-    "build:dev": "run-s build #TODO adjust after adding CDN bundles",
+    "build:bundle": "rollup -c rollup.bundle.config.js",
+    "build:dev": "run-p build:worker build:rollup build:types",
     "build:worker": "rollup -c rollup.config.worker.js",
     "build:core": "rollup -c rollup.npm.config.js",
     "build:types": "tsc -p tsconfig.types.json",
-    "build:watch": "run-p \"build:worker --watch\" \"build:core --watch\" build:types:watch",
-    "build:dev:watch": "yarn build:watch #TODO adjust after adding CDN bundles",
+    "build:watch": "run-p build:worker:watch build:core:watch build:bundle:watch build:types:watch",
+    "build:dev:watch": "run-p build:core:watch build:types:watch",
+    "build:core:watch": "yarn build:core --watch",
+    "build:worker:watch": "yarn build:worker --watch",
+    "build:bundle:watch": "yarn build:bundle --watch",
     "build:types:watch": "tsc -p tsconfig.types.json --watch",
     "build:npm": "ts-node ../../scripts/prepack.ts --bundles && npm pack ./build/npm",
     "circularDepCheck": "madge --circular src/index.ts",

packages/replay/rollup.bundle.config.js

@@ -0,0 +1,30 @@
+import commonjs from '@rollup/plugin-commonjs';
+import replace from '@rollup/plugin-replace';
+
+import { makeBaseBundleConfig, makeBundleConfigVariants } from '../../rollup/index.js';
+
+import pkg from './package.json';
+
+const baseBundleConfig = makeBaseBundleConfig({
+  bundleType: 'addon',
+  entrypoints: ['src/index.ts'],
+  jsVersion: 'es6',
+  licenseTitle: '@sentry/replay',
+  outputFileBase: () => 'bundles/replay',
+  packageSpecificConfig: {
+    plugins: [
+      replace({
+        preventAssignment: true,
+        values: {
+          __SENTRY_REPLAY_VERSION__: JSON.stringify(pkg.version),
+        },
+      }),
+      // lodash.debounce is a CJS module, so we need to convert it to ESM first
+      commonjs(),
+    ],
+  },
+});
+
+const builds = makeBundleConfigVariants(baseBundleConfig);
+
+export default builds;

packages/replay/src/constants.ts

@@ -1,8 +1,9 @@
 import { GLOBAL_OBJ } from '@sentry/utils';
 
-// exporting WINDOW from within the @sentry/replay instead of importing it from @sentry/browser
-// this avoids the Browser package being bundled into the CDN bundle as well as a
-// circular dependency between the Browser and Replay packages in the future
+// exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
+// prevents the browser package from being bundled in the CDN bundle, and avoids a
+// circular dependency between the browser and replay packages should `@sentry/browser` import
+// from `@sentry/replay` in the future
 export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
 
 export const REPLAY_SESSION_KEY = 'sentryReplaySession';

packages/replay/src/index.ts

@@ -23,7 +23,7 @@ import { deleteSession } from './session/deleteSession';
 import { getSession } from './session/getSession';
 import { saveSession } from './session/saveSession';
 import { Session } from './session/Session';
-import {
+import type {
   AllPerformanceEntry,
   InstrumentationTypeBreadcrumb,
   InstrumentationTypeSpan,