chore(browser): reduce bundle size by 6.6 KB (-3.7%) (#3253)

Author: marandaneto

.changeset/reduce-browser-bundle-size.md

@@ -0,0 +1,5 @@
+---
+'posthog-js': patch
+---
+
+Reduce browser SDK bundle size by ~6.6 KB (-3.7%) through code modernization, build config tuning, string deduplication, enum-to-const conversions, and property access shorthand getters.

packages/browser/rollup.config.mjs

@@ -68,7 +68,7 @@ const plugins = (es5, noExternal) => [
         babelHelpers: 'bundled',
         plugins: [
             '@babel/plugin-transform-nullish-coalescing-operator',
-            // Explicitly included so we transform 1 ** 2 to Math.pow(1, 2) for ES6 compatability
+            // Explicitly included so we transform 1 ** 2 to Math.pow(1, 2) for ES6 compatibility
             '@babel/plugin-transform-exponentiation-operator',
         ],
         presets: [
@@ -103,6 +103,13 @@ const plugins = (es5, noExternal) => [
         toplevel: true,
         compress: {
             ecma: es5 ? 5 : 6,
+            passes: 2,
+            pure_getters: true,
+            unsafe_methods: true,
+            unsafe_comps: true,
+            unsafe_math: true,
+            unsafe_proto: true,
+            unsafe_regexp: true,
         },
         format: {
             comments: false,

packages/browser/src/consent.ts

@@ -1,17 +1,18 @@
 import { PostHog } from './posthog-core'
-import { find } from './utils'
+import { COOKIELESS_ALWAYS, COOKIELESS_ON_REJECT } from './constants'
 import { assignableWindow, navigator } from './utils/globals'
 import { cookieStore, localStore } from './storage'
 import { PersistentStore } from './types'
 import { isNoLike, isYesLike } from '@posthog/core'
 
 const OPT_OUT_PREFIX = '__ph_opt_in_out_'
 
-export enum ConsentStatus {
-    PENDING = -1,
-    DENIED = 0,
-    GRANTED = 1,
-}
+export const ConsentStatus = {
+    PENDING: -1,
+    DENIED: 0,
+    GRANTED: 1,
+} as const
+export type ConsentStatus = (typeof ConsentStatus)[keyof typeof ConsentStatus]
 
 /**
  * ConsentManager provides tools for managing user consent as configured by the application.
@@ -34,7 +35,7 @@ export class ConsentManager {
     }
 
     public isOptedOut() {
-        if (this._config.cookieless_mode === 'always') {
+        if (this._config.cookieless_mode === COOKIELESS_ALWAYS) {
             return true
         }
         // we are opted out if:
@@ -44,7 +45,7 @@ export class ConsentManager {
         return (
             this.consent === ConsentStatus.DENIED ||
             (this.consent === ConsentStatus.PENDING &&
-                (this._config.opt_out_capturing_by_default || this._config.cookieless_mode === 'on_reject'))
+                (this._config.opt_out_capturing_by_default || this._config.cookieless_mode === COOKIELESS_ON_REJECT))
         )
     }
 
@@ -114,15 +115,10 @@ export class ConsentManager {
         if (!this._config.respect_dnt) {
             return false
         }
-        return !!find(
-            [
-                navigator?.doNotTrack, // standard
-                (navigator as any)?.['msDoNotTrack'],
-                assignableWindow['doNotTrack'],
-            ],
-            (dntValue): boolean => {
-                return isYesLike(dntValue)
-            }
-        )
+        return [
+            navigator?.doNotTrack, // standard
+            (navigator as any)?.['msDoNotTrack'],
+            assignableWindow['doNotTrack'],
+        ].some((dntValue) => isYesLike(dntValue))
     }
 }

packages/browser/src/constants.ts

@@ -112,6 +112,28 @@ export const PERSISTENCE_RESERVED_PROPERTIES = [
 ]
 
 export const SURVEYS_REQUEST_TIMEOUT_MS = 10000
+export const LOAD_EXT_NOT_FOUND = 'PostHog loadExternalDependency extension not found.'
+
+/* EVENT NAMES - interned to reduce bundle size */
+/* COOKIELESS MODE VALUES */
+export const COOKIELESS_ON_REJECT = 'on_reject' as const
+export const COOKIELESS_ALWAYS = 'always' as const
+
+/* USER STATE VALUES */
+export const USER_STATE_ANONYMOUS = 'anonymous'
+export const USER_STATE_IDENTIFIED = 'identified'
+
+/* PERSON PROFILE MODES */
+export const PERSON_PROFILES_IDENTIFIED_ONLY = 'identified_only' as const
+
+/* DOM EVENT NAMES - interned to reduce bundle size */
+export const DOM_EVENT_VISIBILITYCHANGE = 'visibilitychange'
+export const DOM_EVENT_BEFOREUNLOAD = 'beforeunload'
+
+export const EVENT_PAGEVIEW = '$pageview'
+export const EVENT_PAGELEAVE = '$pageleave'
+export const EVENT_IDENTIFY = '$identify'
+export const EVENT_GROUPIDENTIFY = '$groupidentify'
 
 /* Z-INDEX HIERARCHY: tours > surveys > support */
 export const Z_INDEX_TOURS = 2147483646

packages/browser/src/extensions/conversations/posthog-conversations.ts

@@ -1,3 +1,4 @@
+import { LOAD_EXT_NOT_FOUND } from '../../constants'
 import { PostHog } from '../../posthog-core'
 import {
     ConversationsRemoteConfig,
@@ -18,6 +19,7 @@ import { isToolbarInstance } from '../../utils'
 import { Extension } from '../types'
 
 const logger = createLogger('[Conversations]')
+const NOT_AVAILABLE = 'Conversations not available yet.'
 
 export type ConversationsManager = LazyLoadedConversationsInterface
 
@@ -128,7 +130,7 @@ export class PostHogConversations implements Extension {
             // If we reach here, conversations code is not loaded yet
             const loadExternalDependency = phExtensions.loadExternalDependency
             if (!loadExternalDependency) {
-                this._handleLoadError('PostHog loadExternalDependency extension not found.')
+                this._handleLoadError(LOAD_EXT_NOT_FOUND)
                 return
             }
 
@@ -235,7 +237,7 @@ export class PostHogConversations implements Extension {
         newTicket?: boolean
     ): Promise<SendMessageResponse | null> {
         if (!this._conversationsManager) {
-            logger.warn('Conversations not available yet.')
+            logger.warn(NOT_AVAILABLE)
             return null
         }
         return this._conversationsManager.sendMessage(message, userTraits, newTicket)
@@ -258,7 +260,7 @@ export class PostHogConversations implements Extension {
      */
     async getMessages(ticketId?: string, after?: string): Promise<GetMessagesResponse | null> {
         if (!this._conversationsManager) {
-            logger.warn('Conversations not available yet.')
+            logger.warn(NOT_AVAILABLE)
             return null
         }
         return this._conversationsManager.getMessages(ticketId, after)
@@ -276,7 +278,7 @@ export class PostHogConversations implements Extension {
      */
     async markAsRead(ticketId?: string): Promise<MarkAsReadResponse | null> {
         if (!this._conversationsManager) {
-            logger.warn('Conversations not available yet.')
+            logger.warn(NOT_AVAILABLE)
             return null
         }
         return this._conversationsManager.markAsRead(ticketId)
@@ -298,7 +300,7 @@ export class PostHogConversations implements Extension {
      */
     async getTickets(options?: GetTicketsOptions): Promise<GetTicketsResponse | null> {
         if (!this._conversationsManager) {
-            logger.warn('Conversations not available yet.')
+            logger.warn(NOT_AVAILABLE)
             return null
         }
         return this._conversationsManager.getTickets(options)
@@ -312,7 +314,7 @@ export class PostHogConversations implements Extension {
      */
     async requestRestoreLink(email: string): Promise<RequestRestoreLinkResponse | null> {
         if (!this._conversationsManager) {
-            logger.warn('Conversations not available yet.')
+            logger.warn(NOT_AVAILABLE)
             return null
         }
         return this._conversationsManager.requestRestoreLink(email)
@@ -326,7 +328,7 @@ export class PostHogConversations implements Extension {
      */
     async restoreFromToken(restoreToken: string): Promise<RestoreFromTokenResponse | null> {
         if (!this._conversationsManager) {
-            logger.warn('Conversations not available yet.')
+            logger.warn(NOT_AVAILABLE)
             return null
         }
         return this._conversationsManager.restoreFromToken(restoreToken)
@@ -339,7 +341,7 @@ export class PostHogConversations implements Extension {
      */
     async restoreFromUrlToken(): Promise<RestoreFromTokenResponse | null> {
         if (!this._conversationsManager) {
-            logger.warn('Conversations not available yet.')
+            logger.warn(NOT_AVAILABLE)
             return null
         }
         return this._conversationsManager.restoreFromUrlToken()

packages/browser/src/extensions/history-autocapture.ts

@@ -1,4 +1,5 @@
 import { PostHog } from '../posthog-core'
+import { EVENT_PAGEVIEW } from '../constants'
 import { window } from '../utils/globals'
 import { addEventListener } from '../utils'
 import { logger } from '../utils/logger'
@@ -95,7 +96,7 @@ export class HistoryAutocapture implements Extension {
 
             // Only capture pageview if the pathname has changed and the feature is enabled
             if (currentPathname !== this._lastPathname && this.isEnabled) {
-                this._instance.capture('$pageview', { navigation_type: navigationType })
+                this._instance.capture(EVENT_PAGEVIEW, { navigation_type: navigationType })
             }
 
             this._lastPathname = currentPathname

packages/browser/src/extensions/replay/session-recording.ts

@@ -5,6 +5,7 @@ import {
     SESSION_RECORDING_OVERRIDE_EVENT_TRIGGER,
     SESSION_RECORDING_OVERRIDE_URL_TRIGGER,
     SESSION_RECORDING_REMOTE_CONFIG,
+    COOKIELESS_ALWAYS,
 } from '../../constants'
 import { PostHog } from '../../posthog-core'
 import { RemoteConfigLoader } from '../../remote-config'
@@ -38,6 +39,14 @@ export class SessionRecording implements Extension {
 
     private _recordingStatus: SessionRecordingStatus = DISABLED
 
+    private get _config() {
+        return this._instance.config
+    }
+
+    private get _persistence() {
+        return this._instance.persistence
+    }
+
     private _persistFlagsOnSessionListener: (() => void) | undefined = undefined
     private _lazyLoadedSessionRecording: LazyLoadedSessionRecordingInterface | undefined
 
@@ -58,7 +67,7 @@ export class SessionRecording implements Extension {
             throw new Error(LOGGER_PREFIX + ' started without valid sessionManager. This is a bug.')
         }
 
-        if (this._instance.config.cookieless_mode === 'always') {
+        if (this._config.cookieless_mode === COOKIELESS_ALWAYS) {
             throw new Error(LOGGER_PREFIX + ' cannot be used with cookieless_mode="always"')
         }
     }
@@ -69,8 +78,8 @@ export class SessionRecording implements Extension {
 
     private get _isRecordingEnabled() {
         const enabled_server_side = !!this._instance.get_property(SESSION_RECORDING_REMOTE_CONFIG)?.enabled
-        const enabled_client_side = !this._instance.config.disable_session_recording
-        const isDisabled = this._instance.config.disable_session_recording || this._instance.consent.isOptedOut()
+        const enabled_client_side = !this._config.disable_session_recording
+        const isDisabled = this._config.disable_session_recording || this._instance.consent.isOptedOut()
         return window && enabled_server_side && enabled_client_side && !isDisabled
     }
 
@@ -148,7 +157,7 @@ export class SessionRecording implements Extension {
     }
 
     private _resetSampling() {
-        this._instance.persistence?.unregister(SESSION_RECORDING_IS_SAMPLED)
+        this._persistence?.unregister(SESSION_RECORDING_IS_SAMPLED)
     }
 
     private _validateSampleRate(rate: unknown, source: string): number | null {
@@ -164,15 +173,15 @@ export class SessionRecording implements Extension {
     }
 
     private _persistRemoteConfig(response: RemoteConfig): void {
-        if (this._instance.persistence) {
-            const persistence = this._instance.persistence
+        if (this._persistence) {
+            const persistence = this._persistence
 
             const persistResponse = () => {
                 const sessionRecordingConfigResponse =
                     response.sessionRecording === false ? undefined : response.sessionRecording
 
                 const localSampleRate = this._validateSampleRate(
-                    this._instance.config.session_recording?.sampleRate,
+                    this._config.session_recording?.sampleRate,
                     'session_recording.sampleRate'
                 )
                 const remoteSampleRate = this._validateSampleRate(
@@ -317,7 +326,7 @@ export class SessionRecording implements Extension {
      * */
     public overrideLinkedFlag() {
         if (!this._lazyLoadedSessionRecording) {
-            this._instance.persistence?.register({
+            this._persistence?.register({
                 [SESSION_RECORDING_OVERRIDE_LINKED_FLAG]: true,
             })
         }
@@ -333,7 +342,7 @@ export class SessionRecording implements Extension {
      * */
     public overrideSampling() {
         if (!this._lazyLoadedSessionRecording) {
-            this._instance.persistence?.register({
+            this._persistence?.register({
                 [SESSION_RECORDING_OVERRIDE_SAMPLING]: true,
             })
         }
@@ -349,7 +358,7 @@ export class SessionRecording implements Extension {
      * */
     public overrideTrigger(triggerType: TriggerType) {
         if (!this._lazyLoadedSessionRecording) {
-            this._instance.persistence?.register({
+            this._persistence?.register({
                 [triggerType === 'url'
                     ? SESSION_RECORDING_OVERRIDE_URL_TRIGGER
                     : SESSION_RECORDING_OVERRIDE_EVENT_TRIGGER]: true,

packages/browser/src/extensions/segment-integration.ts

@@ -19,7 +19,7 @@
 import { PostHog } from '../posthog-core'
 import { createLogger } from '../utils/logger'
 
-import { USER_STATE } from '../constants'
+import { EVENT_IDENTIFY, EVENT_PAGEVIEW, USER_STATE, USER_STATE_IDENTIFIED } from '../constants'
 import { isFunction } from '@posthog/core'
 import { uuidv7 } from '../uuidv7'
 
@@ -63,8 +63,8 @@ const createSegmentIntegration = (posthog: PostHog): SegmentPlugin => {
         // eslint-disable-next-line compat/compat
         load: () => Promise.resolve(),
         track: (ctx) => enrichEvent(ctx, ctx.event.event),
-        page: (ctx) => enrichEvent(ctx, '$pageview'),
-        identify: (ctx) => enrichEvent(ctx, '$identify'),
+        page: (ctx) => enrichEvent(ctx, EVENT_PAGEVIEW),
+        identify: (ctx) => enrichEvent(ctx, EVENT_IDENTIFY),
         screen: (ctx) => enrichEvent(ctx, '$screen'),
     }
 }
@@ -86,7 +86,7 @@ function setupPostHogFromSegment(posthog: PostHog, done: () => void) {
                 distinct_id: user.id(),
                 $device_id: getSegmentAnonymousId(),
             })
-            posthog.persistence!.set_property(USER_STATE, 'identified')
+            posthog.persistence!.set_property(USER_STATE, USER_STATE_IDENTIFIED)
         }
 
         done()

packages/browser/src/extensions/toolbar.ts

@@ -18,11 +18,8 @@ const LOCALSTORAGE_KEY = '_postHogToolbarParams'
 
 const logger = createLogger('[Toolbar]')
 
-enum ToolbarState {
-    UNINITIALIZED = 0,
-    LOADING = 1,
-    LOADED = 2,
-}
+const ToolbarState = { UNINITIALIZED: 0, LOADING: 1, LOADED: 2 } as const
+type ToolbarState = (typeof ToolbarState)[keyof typeof ToolbarState]
 
 export class Toolbar implements Extension {
     instance: PostHog