Merge pull request #156 from decentraland/feat/lazy-load-babylon-and-unity

feat: Lazy load Babylon and Unity

Author: LautaroPetaccio

package.json

@@ -77,4 +77,4 @@
     "typescript": "^5.2.2",
     "vite": "^6.3.5"
   }
-}
+}

scripts/prebuild.cjs

@@ -13,7 +13,7 @@ const packageJson = JSON.parse(fs.readFileSync('./package.json').toString())
 const publicPackageJson = JSON.parse(fs.readFileSync('./public/package.json').toString())
 
 // set version
-ENV_CONTENT['REACT_APP_WEBSITE_VERSION'] = packageJson.version
+ENV_CONTENT['VITE_REACT_APP_WEBSITE_VERSION'] = packageJson.version
 publicPackageJson.version = packageJson.version
 
 // set public url

src/index.tsx

@@ -1,13 +1,14 @@
-import { StrictMode } from 'react'
+import React, { StrictMode, Suspense } from 'react'
 import { createRoot } from 'react-dom/client'
-import { Preview } from './components/Preview'
-import { UnityPreview } from './components/UnityPreview'
+const UnityPreview = React.lazy(() => import('./components/UnityPreview/UnityPreview'))
 import { WebGPUProvider } from './contexts/WebGPUContext'
 import { useWebGPU } from './hooks/useWebGPU'
 import { detectWebGPU } from './lib/webgpu'
 import { initSentry } from './lib/sentry'
 import './index.css'
 
+const Preview = React.lazy(() => import('./components/Preview/Preview'))
+
 // Initialize Sentry as early as possible to capture all errors
 initSentry()
 
@@ -19,7 +20,7 @@ const App = () => {
   // Use UnityPreview if WebGPU is available and Unity is requested, otherwise use Preview
   const shouldUseUnity = isUnityPreview && isAvailable
 
-  return shouldUseUnity ? <UnityPreview /> : <Preview />
+  return <Suspense fallback={null}>{shouldUseUnity ? <UnityPreview /> : <Preview />}</Suspense>
 }
 
 // Initialize the app with WebGPU detection

src/lib/babylon/face.ts

@@ -1,6 +1,6 @@
 import { AbstractMesh, Color3, Orientation, PBRMaterial, Scene, StandardMaterial, Texture } from '@babylonjs/core'
 import { PreviewConfig, BodyShape, WearableCategory, WearableDefinition } from '@dcl/schemas'
-import { hexToColor } from '../color'
+import { hexToColor } from './utils'
 import { Asset, loadMask, loadTexture } from './scene'
 import { isCategory } from './utils'
 

src/lib/babylon/scene.ts

@@ -35,7 +35,7 @@ import {
   PreviewType,
   WearableDefinition,
 } from '@dcl/schemas'
-import { hexToColor } from '../color'
+import { hexToColor } from './utils'
 import { isIOs } from '../env'
 import { getWearableRepresentation } from '../representation'
 import { createSceneController } from '../scene'

src/lib/babylon/utils.ts

@@ -2,8 +2,19 @@ import { BodyPartCategory, HideableWearableCategory, WearableCategory, WearableD
 import { SocialEmoteAnimation } from '@dcl/schemas/dist/dapps/preview/social-emote-animation'
 import { AnimationGroup, TransformNode, Color3, PBRMaterial, StandardMaterial } from '@babylonjs/core'
 import { getWearableRepresentationOrDefault, isTexture } from '../representation'
+import { parseHex } from '../color'
 import { Asset } from './scene'
 
+export function hexToColor(hex: string) {
+  const parsed = parseHex(hex)
+  const color = new Color3(
+    parseInt(parsed.slice(0, 2), 16) / 256,
+    parseInt(parsed.slice(2, 4), 16) / 256,
+    parseInt(parsed.slice(4, 6), 16) / 256
+  )
+  return color
+}
+
 export function isCategory(category: WearableCategory) {
   return (wearable: WearableDefinition) => wearable.data.category === category
 }

src/lib/color.ts

@@ -1,4 +1,3 @@
-import { Color3 } from '@babylonjs/core'
 import { Color3 as RGB } from '@dcl/schemas'
 
 export function formatHex(color: string) {
@@ -17,13 +16,3 @@ export function numberToHex(value: number) {
 export function colorToHex(color: RGB) {
   return numberToHex(color.r) + numberToHex(color.g) + numberToHex(color.b)
 }
-
-export function hexToColor(hex: string) {
-  const parsed = parseHex(hex)
-  const color = new Color3(
-    parseInt(parsed.slice(0, 2), 16) / 256,
-    parseInt(parsed.slice(2, 4), 16) / 256,
-    parseInt(parsed.slice(4, 6), 16) / 256
-  )
-  return color
-}

src/lib/sentry.ts

@@ -1,5 +1,12 @@
 import * as Sentry from '@sentry/browser'
 import { config } from '../config'
+import {
+  browserTracingIntegration,
+  dedupeIntegration,
+  globalHandlersIntegration,
+  linkedErrorsIntegration,
+} from '@sentry/browser'
+import { Env } from '@dcl/ui-env'
 
 let sentryClient: ReturnType<typeof Sentry.init>
 
@@ -8,7 +15,21 @@ export function initSentry() {
 
   sentryClient = Sentry.init({
     dsn: SENTRY_DSN,
-    environment: import.meta.env.MODE,
+    environment: config.get('ENVIRONMENT'),
+    release: `${config.get('SENTRY_RELEASE_PREFIX', 'auth')}@${import.meta.env.VITE_REACT_APP_WEBSITE_VERSION}`,
+    enabled: !config.is(Env.DEVELOPMENT),
+    defaultIntegrations: false,
+    integrations: [
+      globalHandlersIntegration(),
+      linkedErrorsIntegration(),
+      dedupeIntegration(),
+      browserTracingIntegration({
+        enableLongTask: false,
+        enableLongAnimationFrame: false,
+        enableInp: false,
+        enableElementTiming: false,
+      }),
+    ],
     // Tag every event so we know it came from the iframe renderer
     initialScope: {
       tags: {