refactor(FR-2468): lazy-load 5 static pages and migrate lodash to lodash-es (#6422)

Resolves (FR-2468)

## Summary
- Convert 5 statically imported pages (`ComputeSessionListPage`, `ModelStoreListPage`, `VFolderNodeListPage`, `ServingPage`, `Page404`) to `React.lazy()` in `routes.tsx`, enabling code splitting
- Migrate all 222 lodash imports from `lodash` (CommonJS, not tree-shakeable) to `lodash-es` (ESM, tree-shakeable) across the codebase
- Replace 2 lodash chain call sites (`_(array).map().some()`, `_(array).reduce()`) with native array methods / static `_.reduce()`
- Add `lodash-es` and `@types/lodash-es` to pnpm catalog and react/package.json

**Bundle impact** (main.js minified):
- Before: **4.84 MB**
- After: **~4.3 MB** (-540 KB, -11%)
  - App code: -498 KB (lazy loading)
  - lodash tree-shaking: -325 KB (546 KB → 221 KB)

## Test plan
- [ ] Verify all pages load correctly (especially the 5 lazy-loaded pages)
- [ ] Verify lodash utility functions work as expected
- [ ] Run `pnpm run build` — no errors, main.js < 5 MB
- [ ] TypeScript compiles without lodash-related errors

Author: yomybaby

pnpm-lock.yaml

@@ -20,6 +20,7 @@ catalog:
   '@types/big.js': ^6.2.2
   '@types/jest': ^30.0.0
   '@types/lodash': ^4.17.24
+  '@types/lodash-es': ^4.17.12
   '@types/node': ^22.19.15
   '@types/react': ^19.2.14
   '@types/react-copy-to-clipboard': ^5.0.7
@@ -48,6 +49,7 @@ catalog:
   jest-environment-jsdom: ^30.2.0
   jsonc-eslint-parser: ^2.4.2
   lodash: ^4.17.23
+  lodash-es: ^4.17.21
   lucide-react: ^0.552.0
   marked: ^16.4.2
   prettier: ^3.8.1

pnpm-workspace.yaml

@@ -22,7 +22,7 @@ module.exports = {
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
   },
   transformIgnorePatterns: [
-    'node_modules/(?!(\\.pnpm/.+?/node_modules/(backend\\.ai-ui|nuqs)/|backend\\.ai-ui/|nuqs/))',
+    'node_modules/(?!(\\.pnpm/.+?/node_modules/(backend\\.ai-ui|nuqs|lodash-es)/|backend\\.ai-ui/|nuqs/|lodash-es/))',
     `!${path.resolve(__dirname, '../packages/backend.ai-ui/src')}`,
   ],
   transform: {

react/jest.config.cjs

@@ -50,7 +50,7 @@
     "jotai-effect": "^2.2.3",
     "jotai-family": "^1.0.1",
     "katex": "^0.16.38",
-    "lodash": "catalog:",
+    "lodash-es": "catalog:",
     "lucide-react": "catalog:",
     "markdown-to-jsx": "^7.7.17",
     "marked": "catalog:",
@@ -124,6 +124,7 @@
     "@types/big.js": "catalog:",
     "@types/jest": "catalog:",
     "@types/lodash": "catalog:",
+    "@types/lodash-es": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-copy-to-clipboard": "catalog:",

react/package.json

@@ -4,7 +4,7 @@
  */
 import { AccessKeySelectQuery } from '../__generated__/AccessKeySelectQuery.graphql';
 import { BAISelect, BAISelectProps } from 'backend.ai-ui';
-import _ from 'lodash';
+import * as _ from 'lodash-es';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useLazyLoadQuery } from 'react-relay';

react/src/components/AccessKeySelect.tsx

@@ -15,7 +15,7 @@ import {
   toLocalId,
 } from 'backend.ai-ui';
 import dayjs from 'dayjs';
-import _ from 'lodash';
+import * as _ from 'lodash-es';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useFragment } from 'react-relay';

react/src/components/AgentDetailDrawerContent.tsx

@@ -16,7 +16,7 @@ import {
   BAIProgressWithLabel,
   convertToBinaryUnit,
 } from 'backend.ai-ui';
-import _ from 'lodash';
+import * as _ from 'lodash-es';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useFragment } from 'react-relay';

react/src/components/AgentDetailModal.tsx

@@ -27,7 +27,7 @@ import {
   BAIAgentTable,
   BAIUnmountAfterClose,
 } from 'backend.ai-ui';
-import _ from 'lodash';
+import * as _ from 'lodash-es';
 import { parseAsString, useQueryStates } from 'nuqs';
 import React, { useState, useDeferredValue } from 'react';
 import { useTranslation } from 'react-i18next';

react/src/components/AgentList.tsx

@@ -3,7 +3,7 @@
  Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
  */
 import { BAIDoubleTag, BAITag } from 'backend.ai-ui';
-import _ from 'lodash';
+import * as _ from 'lodash-es';
 import { graphql, useFragment } from 'react-relay';
 import { AgentComputePluginsFragment$key } from 'src/__generated__/AgentComputePluginsFragment.graphql';
 

react/src/components/AgentNodeItems/AgentComputePlugins.tsx

@@ -18,7 +18,7 @@ import {
   toFixedFloorWithoutTrailingZeros,
   useResourceSlotsDetails,
 } from 'backend.ai-ui';
-import _ from 'lodash';
+import * as _ from 'lodash-es';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useFragment } from 'react-relay';