Repo performance boost

next.config.js

@@ -4,6 +4,10 @@ const { withGTConfig } = require("gt-next/config");
 const nextConfig = {
   reactStrictMode: true,
   reactCompiler: true,
+  // PERF: Strip console.log in production (keeps error/warn)
+  ...(process.env.NODE_ENV === 'production' && {
+    compiler: { removeConsole: { exclude: ['error', 'warn'] } },
+  }),
 };
 
 module.exports = withGTConfig(nextConfig);

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "license": "MIT",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "npm run compress-images && next build",
     "start": "next start",
     "lint": "eslint .",

src/components/game/CanvasIsometricGrid.tsx

@@ -124,7 +124,8 @@ export interface CanvasIsometricGridProps {
 }
 
 // Canvas-based Isometric Grid - HIGH PERFORMANCE
-export function CanvasIsometricGrid({ overlayMode, selectedTile, setSelectedTile, isMobile = false, navigationTarget, onNavigationComplete, onViewportChange, onBargeDelivery }: CanvasIsometricGridProps) {
+// PERF: Memoized to skip re-renders when parent re-renders with same props (e.g. state sync without prop changes)
+export const CanvasIsometricGrid = React.memo(function CanvasIsometricGrid({ overlayMode, selectedTile, setSelectedTile, isMobile = false, navigationTarget, onNavigationComplete, onViewportChange, onBargeDelivery }: CanvasIsometricGridProps) {
   const { state, latestStateRef, placeAtTile, finishTrackDrag, connectToCity, checkAndDiscoverCities, currentSpritePack, visualHour } = useGame();
   const { grid, gridSize, selectedTool, speed, adjacentCities, waterBodies, gameVersion } = state;
 
@@ -469,42 +470,16 @@ export function CanvasIsometricGrid({ overlayMode, selectedTile, setSelectedTile
   } = useEffectsSystems(effectsSystemRefs, effectsSystemState);
 
   // PERF: Sync worldStateRef from latestStateRef (real-time) instead of React state (throttled)
-  // This runs on every animation frame via the render loop, not on React state changes
   useEffect(() => {
-    // Initial sync from React state
     worldStateRef.current.grid = grid;
     worldStateRef.current.gridSize = gridSize;
     gridVersionRef.current++;
     crossingPositionsRef.current = findRailroadCrossings(grid, gridSize);
   }, [grid, gridSize]);
-
-  // PERF: Continuously sync from latestStateRef for real-time grid updates
-  // This allows canvas to see simulation changes before React state syncs
-  useEffect(() => {
-    let animFrameId: number;
-    let lastGridVersion = 0;
-
-    const syncFromRef = () => {
-      animFrameId = requestAnimationFrame(syncFromRef);
-
-      // Only update if latestStateRef has newer data
-      const latest = latestStateRef.current;
-      if (latest && latest.grid !== worldStateRef.current.grid) {
-        worldStateRef.current.grid = latest.grid;
-        worldStateRef.current.gridSize = latest.gridSize;
-        // Only recalculate crossings if grid actually changed
-        const newVersion = gridVersionRef.current + 1;
-        if (newVersion !== lastGridVersion) {
-          lastGridVersion = newVersion;
-          gridVersionRef.current = newVersion;
-          crossingPositionsRef.current = findRailroadCrossings(latest.grid, latest.gridSize);
-        }
-      }
-    };
-
-    animFrameId = requestAnimationFrame(syncFromRef);
-    return () => cancelAnimationFrame(animFrameId);
-  }, [latestStateRef]);
+
+  // PERF: Rate-limit findRailroadCrossings - rail structure only changes on place/bulldoze, not every sim tick
+  const lastCrossingRecalcRef = useRef(0);
+  const CROSSING_RECALC_INTERVAL_MS = 250;
 
   useEffect(() => {
     worldStateRef.current.offset = offset;
@@ -2404,6 +2379,19 @@ export function CanvasIsometricGrid({ overlayMode, selectedTile, setSelectedTile
     const render = (time: number) => {
       animationFrameId = requestAnimationFrame(render);
 
+      // PERF: Sync worldStateRef from latestStateRef (merged from separate rAF loop - one less loop)
+      const latest = latestStateRef.current;
+      if (latest && latest.grid !== worldStateRef.current.grid) {
+        worldStateRef.current.grid = latest.grid;
+        worldStateRef.current.gridSize = latest.gridSize;
+        // Rate-limit findRailroadCrossings - rail structure unchanged during sim ticks, only on place/bulldoze
+        if (time - lastCrossingRecalcRef.current > CROSSING_RECALC_INTERVAL_MS) {
+          lastCrossingRecalcRef.current = time;
+          gridVersionRef.current++;
+          crossingPositionsRef.current = findRailroadCrossings(latest.grid, latest.gridSize);
+        }
+      }
+
       // Frame rate limiting for mobile - skip frames to maintain target FPS
       const timeSinceLastRender = time - lastRenderTime;
       if (isMobile && timeSinceLastRender < targetFrameTime) {
@@ -3272,4 +3260,4 @@ export function CanvasIsometricGrid({ overlayMode, selectedTile, setSelectedTile
       })()}
     </div>
   );
-}
+});

src/lib/simulation.ts

@@ -1209,8 +1209,29 @@ export const SERVICE_MAX_LEVEL = 5;
 export const SERVICE_RANGE_INCREASE_PER_LEVEL = 0.2; // 20% per level (Level 1: 100%, Level 5: 180%)
 export const SERVICE_UPGRADE_COST_BASE = 2; // Cost = baseCost * (2 ^ currentLevel)
 
+// PERF: Cache service coverage - only recalc when service building positions/levels change
+let serviceCoverageCache: { key: string; result: ServiceCoverage; size: number } | null = null;
+
+function getServiceBuildingCacheKey(grid: Tile[][], size: number): string {
+  const parts: string[] = [];
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      const b = grid[y][x].building;
+      if (SERVICE_BUILDING_TYPES.has(b.type) && (b.constructionProgress ?? 100) === 100 && !b.abandoned) {
+        parts.push(`${x},${y},${b.type},${b.level ?? 1}`);
+      }
+    }
+  }
+  return parts.sort().join('|');
+}
+
 // Calculate service coverage from service buildings - optimized version
 function calculateServiceCoverage(grid: Tile[][], size: number): ServiceCoverage {
+  const cacheKey = getServiceBuildingCacheKey(grid, size);
+  if (serviceCoverageCache && serviceCoverageCache.key === cacheKey && serviceCoverageCache.size === size) {
+    return serviceCoverageCache.result;
+  }
+
   const services = createServiceCoverage(size);
 
   // First pass: collect all service building positions (much faster than checking every tile)
@@ -1301,6 +1322,7 @@ function calculateServiceCoverage(grid: Tile[][], size: number): ServiceCoverage
     }
   }
 
+  serviceCoverageCache = { key: cacheKey, result: services, size };
   return services;
 }