refactor: lazy load large modules (#33888)

web/app/components/base/amplitude/AmplitudeProvider.tsx

@@ -5,17 +5,12 @@ import * as amplitude from '@amplitude/analytics-browser'
 import { sessionReplayPlugin } from '@amplitude/plugin-session-replay-browser'
 import * as React from 'react'
 import { useEffect } from 'react'
-import { AMPLITUDE_API_KEY, IS_CLOUD_EDITION } from '@/config'
+import { AMPLITUDE_API_KEY, isAmplitudeEnabled } from '@/config'
 
 export type IAmplitudeProps = {
   sessionReplaySampleRate?: number
 }
 
-// Check if Amplitude should be enabled
-export const isAmplitudeEnabled = () => {
-  return IS_CLOUD_EDITION && !!AMPLITUDE_API_KEY
-}
-
 // Map URL pathname to English page name for consistent Amplitude tracking
 const getEnglishPageName = (pathname: string): string => {
   // Remove leading slash and get the first segment
@@ -59,7 +54,7 @@ const AmplitudeProvider: FC<IAmplitudeProps> = ({
 }) => {
   useEffect(() => {
     // Only enable in Saas edition with valid API key
-    if (!isAmplitudeEnabled())
+    if (!isAmplitudeEnabled)
       return
 
     // Initialize Amplitude

web/app/components/base/amplitude/__tests__/AmplitudeProvider.spec.tsx

@@ -2,14 +2,24 @@ import * as amplitude from '@amplitude/analytics-browser'
 import { sessionReplayPlugin } from '@amplitude/plugin-session-replay-browser'
 import { render } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import AmplitudeProvider, { isAmplitudeEnabled } from '../AmplitudeProvider'
+import AmplitudeProvider from '../AmplitudeProvider'
 
 const mockConfig = vi.hoisted(() => ({
   AMPLITUDE_API_KEY: 'test-api-key',
   IS_CLOUD_EDITION: true,
 }))
 
-vi.mock('@/config', () => mockConfig)
+vi.mock('@/config', () => ({
+  get AMPLITUDE_API_KEY() {
+    return mockConfig.AMPLITUDE_API_KEY
+  },
+  get IS_CLOUD_EDITION() {
+    return mockConfig.IS_CLOUD_EDITION
+  },
+  get isAmplitudeEnabled() {
+    return mockConfig.IS_CLOUD_EDITION && !!mockConfig.AMPLITUDE_API_KEY
+  },
+}))
 
 vi.mock('@amplitude/analytics-browser', () => ({
   init: vi.fn(),
@@ -27,22 +37,6 @@ describe('AmplitudeProvider', () => {
     mockConfig.IS_CLOUD_EDITION = true
   })
 
-  describe('isAmplitudeEnabled', () => {
-    it('returns true when cloud edition and api key present', () => {
-      expect(isAmplitudeEnabled()).toBe(true)
-    })
-
-    it('returns false when cloud edition but no api key', () => {
-      mockConfig.AMPLITUDE_API_KEY = ''
-      expect(isAmplitudeEnabled()).toBe(false)
-    })
-
-    it('returns false when not cloud edition', () => {
-      mockConfig.IS_CLOUD_EDITION = false
-      expect(isAmplitudeEnabled()).toBe(false)
-    })
-  })
-
   describe('Component', () => {
     it('initializes amplitude when enabled', () => {
       render(<AmplitudeProvider sessionReplaySampleRate={0.8} />)

web/app/components/base/amplitude/__tests__/index.spec.ts

@@ -1,32 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import AmplitudeProvider, { isAmplitudeEnabled } from '../AmplitudeProvider'
-import indexDefault, {
-  isAmplitudeEnabled as indexIsAmplitudeEnabled,
-  resetUser,
-  setUserId,
-  setUserProperties,
-  trackEvent,
-} from '../index'
-import {
-  resetUser as utilsResetUser,
-  setUserId as utilsSetUserId,
-  setUserProperties as utilsSetUserProperties,
-  trackEvent as utilsTrackEvent,
-} from '../utils'
-
-describe('Amplitude index exports', () => {
-  it('exports AmplitudeProvider as default', () => {
-    expect(indexDefault).toBe(AmplitudeProvider)
-  })
-
-  it('exports isAmplitudeEnabled', () => {
-    expect(indexIsAmplitudeEnabled).toBe(isAmplitudeEnabled)
-  })
-
-  it('exports utils', () => {
-    expect(resetUser).toBe(utilsResetUser)
-    expect(setUserId).toBe(utilsSetUserId)
-    expect(setUserProperties).toBe(utilsSetUserProperties)
-    expect(trackEvent).toBe(utilsTrackEvent)
-  })
-})

web/app/components/base/amplitude/__tests__/utils.spec.ts

@@ -20,8 +20,10 @@ const MockIdentify = vi.hoisted(() =>
   },
 )
 
-vi.mock('../AmplitudeProvider', () => ({
-  isAmplitudeEnabled: () => mockState.enabled,
+vi.mock('@/config', () => ({
+  get isAmplitudeEnabled() {
+    return mockState.enabled
+  },
 }))
 
 vi.mock('@amplitude/analytics-browser', () => ({

web/app/components/base/amplitude/index.ts

@@ -1,2 +1,2 @@
-export { default, isAmplitudeEnabled } from './AmplitudeProvider'
+export { default } from './lazy-amplitude-provider'
 export { resetUser, setUserId, setUserProperties, trackEvent } from './utils'

web/app/components/base/amplitude/lazy-amplitude-provider.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import type { FC } from 'react'
+import type { IAmplitudeProps } from './AmplitudeProvider'
+import dynamic from '@/next/dynamic'
+
+const AmplitudeProvider = dynamic(() => import('./AmplitudeProvider'), { ssr: false })
+
+const LazyAmplitudeProvider: FC<IAmplitudeProps> = props => <AmplitudeProvider {...props} />
+
+export default LazyAmplitudeProvider

web/app/components/base/amplitude/utils.ts

@@ -1,5 +1,5 @@
 import * as amplitude from '@amplitude/analytics-browser'
-import { isAmplitudeEnabled } from './AmplitudeProvider'
+import { isAmplitudeEnabled } from '@/config'
 
 /**
  * Track custom event
@@ -7,7 +7,7 @@ import { isAmplitudeEnabled } from './AmplitudeProvider'
  * @param eventProperties Event properties (optional)
  */
 export const trackEvent = (eventName: string, eventProperties?: Record<string, any>) => {
-  if (!isAmplitudeEnabled())
+  if (!isAmplitudeEnabled)
     return
   amplitude.track(eventName, eventProperties)
 }
@@ -17,7 +17,7 @@ export const trackEvent = (eventName: string, eventProperties?: Record<string, a
  * @param userId User ID
  */
 export const setUserId = (userId: string) => {
-  if (!isAmplitudeEnabled())
+  if (!isAmplitudeEnabled)
     return
   amplitude.setUserId(userId)
 }
@@ -27,7 +27,7 @@ export const setUserId = (userId: string) => {
  * @param properties User properties
  */
 export const setUserProperties = (properties: Record<string, any>) => {
-  if (!isAmplitudeEnabled())
+  if (!isAmplitudeEnabled)
     return
   const identifyEvent = new amplitude.Identify()
   Object.entries(properties).forEach(([key, value]) => {
@@ -40,7 +40,7 @@ export const setUserProperties = (properties: Record<string, any>) => {
  * Reset user (e.g., when user logs out)
  */
 export const resetUser = () => {
-  if (!isAmplitudeEnabled())
+  if (!isAmplitudeEnabled)
     return
   amplitude.reset()
 }