perf: dynamically import posthog (#2622)

apps/remix/app/entry.client.tsx

@@ -3,7 +3,6 @@ import { dynamicActivate } from '@documenso/lib/utils/i18n';
 import { i18n } from '@lingui/core';
 import { detect, fromHtmlTag } from '@lingui/detect-locale';
 import { I18nProvider } from '@lingui/react';
-import posthog from 'posthog-js';
 import { StrictMode, startTransition, useEffect } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { HydratedRouter } from 'react-router/dom';
@@ -15,9 +14,11 @@ function PosthogInit() {
 
   useEffect(() => {
     if (postHogConfig) {
-      posthog.init(postHogConfig.key, {
+      void import('posthog-js').then(({ default: posthog }) => {
-        api_host: postHogConfig.host,
+        posthog.init(postHogConfig.key, {
-        capture_exceptions: true,
+          api_host: postHogConfig.host,
+          capture_exceptions: true,
+        });
       });
     }
   }, []);

packages/lib/client-only/hooks/use-analytics.ts

@@ -1,5 +1,14 @@
 import { extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
-import { posthog } from 'posthog-js';
+
+let posthogPromise: Promise<typeof import('posthog-js')> | null = null;
+
+const getPosthog = async () => {
+  if (!posthogPromise) {
+    posthogPromise = import('posthog-js');
+  }
+
+  return posthogPromise;
+};
 
 export function useAnalytics() {
   // const featureFlags = useFeatureFlags();
@@ -16,7 +25,9 @@ export function useAnalytics() {
       return;
     }
 
-    posthog.capture(event, properties);
+    void getPosthog().then(({ default: posthog }) => {
+      posthog.capture(event, properties);
+    });
   };
 
   /**
@@ -30,7 +41,9 @@ export function useAnalytics() {
       return;
     }
 
-    posthog.captureException(error, properties);
+    void getPosthog().then(({ default: posthog }) => {
+      posthog.captureException(error, properties);
+    });
   };
 
   /**