From bff0a4d931fbdee01818e2e9e66e4d67fadd28c5 Mon Sep 17 00:00:00 2001 From: root Date: Wed, 6 May 2026 16:28:50 +0000 Subject: [PATCH] build(web): clean split warnings and monaco loading --- .../strategy/CodeStrategyEditor.tsx | 3 ++- web/src/lib/authSession.ts | 6 +++--- web/src/lib/monacoLocalWorkers.ts | 17 ++++++++++++++--- web/vite.config.ts | 19 +++++++++++++++++++ 4 files changed, 38 insertions(+), 7 deletions(-) diff --git a/web/src/components/strategy/CodeStrategyEditor.tsx b/web/src/components/strategy/CodeStrategyEditor.tsx index ffac343..eb15ac4 100644 --- a/web/src/components/strategy/CodeStrategyEditor.tsx +++ b/web/src/components/strategy/CodeStrategyEditor.tsx @@ -6,7 +6,7 @@ import { Suspense, lazy, useCallback, useEffect, useRef, useState } from 'react' import { Play, Save, Copy, RotateCcw } from 'lucide-react'; import { getPlatformAccessToken } from '../../lib/authSession'; import { createTradeProfile } from '../../lib/profileApi'; -import '../../lib/monacoLocalWorkers'; +import { ensureMonacoLoaderConfigured } from '../../lib/monacoLocalWorkers'; import { tradingRuntime } from '../../lib/runtime'; import { createRequestId } from '../../../../shared/request-id.js'; import { Button } from '../ui/button'; @@ -82,6 +82,7 @@ export function CodeStrategyEditor({ useEffect(() => { mountedRef.current = true; + void ensureMonacoLoaderConfigured(); return () => { mountedRef.current = false; clearSavedResetTimeout(); diff --git a/web/src/lib/authSession.ts b/web/src/lib/authSession.ts index 5002ce9..b92b4e0 100644 --- a/web/src/lib/authSession.ts +++ b/web/src/lib/authSession.ts @@ -1,4 +1,5 @@ import { createRequestId } from '../../../shared/request-id.js'; +import { tradingRuntime } from './runtime'; const AUTH_STORAGE_PREFIX = 'invttrdg_web'; const ACCESS_TOKEN_KEY = `${AUTH_STORAGE_PREFIX}_access_token`; @@ -149,12 +150,11 @@ async function platformRequest( body?: Record; } ): Promise { - const runtimeModule = await import('./runtime'); - const response = await fetch(`${runtimeModule.tradingRuntime.platformApiUrl}${path}`, { + const response = await fetch(`${tradingRuntime.platformApiUrl}${path}`, { method: options?.method || 'GET', headers: { 'Content-Type': 'application/json', - 'x-product-id': runtimeModule.tradingRuntime.productId, + 'x-product-id': tradingRuntime.productId, 'x-request-id': createRequestId('web-auth'), ...(options?.accessToken ? { Authorization: `Bearer ${options.accessToken}` } : {}), }, diff --git a/web/src/lib/monacoLocalWorkers.ts b/web/src/lib/monacoLocalWorkers.ts index 09d2ac3..7de0e0f 100644 --- a/web/src/lib/monacoLocalWorkers.ts +++ b/web/src/lib/monacoLocalWorkers.ts @@ -1,5 +1,3 @@ -import { loader } from '@monaco-editor/react'; -import * as monaco from 'monaco-editor'; import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'; import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'; import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'; @@ -24,6 +22,7 @@ const monacoGlobal = globalThis as typeof globalThis & { MonacoEnvironment?: { getWorker: (_moduleId: string, label: string) => Worker; }; + __INVTTRDG_MONACO_CONFIGURED__?: boolean; }; monacoGlobal.MonacoEnvironment = { @@ -33,4 +32,16 @@ monacoGlobal.MonacoEnvironment = { }, }; -loader.config({ monaco }); +export async function ensureMonacoLoaderConfigured(): Promise { + if (monacoGlobal.__INVTTRDG_MONACO_CONFIGURED__) { + return; + } + + const [{ loader }, monaco] = await Promise.all([ + import('@monaco-editor/react'), + import('monaco-editor'), + ]); + + loader.config({ monaco }); + monacoGlobal.__INVTTRDG_MONACO_CONFIGURED__ = true; +} diff --git a/web/vite.config.ts b/web/vite.config.ts index bcf7b9c..7f698c5 100644 --- a/web/vite.config.ts +++ b/web/vite.config.ts @@ -52,4 +52,23 @@ export default defineConfig({ setupFiles: ['./src/test/setup.ts'], include: ['src/**/*.test.ts', 'src/**/*.test.tsx', 'src/**/*.dom.test.tsx'], }, + build: { + chunkSizeWarningLimit: 5000, + rollupOptions: { + output: { + manualChunks(id) { + if (id.includes('monaco-editor') || id.includes('@monaco-editor')) { + return 'monaco-vendor'; + } + if (id.includes('/node_modules/lucide-react/')) { + return 'ui-vendor'; + } + if (id.includes('/node_modules/')) { + return 'vendor'; + } + return undefined; + }, + }, + }, + }, })