perf(web): разбиение бандла и runtime-оптимизации

- autoCodeSplitting роутов: начальный JS 1012КБ/298гз → 426КБ/131гз (−58%),
  админ-чанки грузятся по требованию
- фильтры грида: убрана искусственная задержка 200мс
- SystemMonitorPopover: поллинг 4 запросов/30с только при открытом поповере
- /me в beforeLoad через ensureQueryData (кэш вместо запроса на каждую навигацию)
- глобальный staleTime 30с (мутации инвалидируют кэш явно)
- режим analyze + rollup-plugin-visualizer (pnpm --filter web analyze)
This commit is contained in:
Denozordec
2026-09-23 14:51:14 +07:00
parent 87f35631b4
commit 15073f53d9
5 changed files with 46 additions and 31 deletions
@@ -1,4 +1,4 @@
import { useMemo, type ReactNode } from 'react'
import { useMemo, useState, type ReactNode } from 'react'
import { useQuery } from '@tanstack/react-query'
import { Activity, AppWindow, KeyRound, Users } from 'lucide-react'
@@ -76,6 +76,9 @@ function MetricCell({ metric }: { metric: MonitorMetric }) {
/** Live system monitor popover — app-shell-7, Auth Portal metrics. @see https://reui.io/preview/base/app-shell-7 */
export function SystemMonitorPopover() {
// Поллинг живёт только пока поповер открыт: закрытый монитор не должен
// каждые 30 секунд тянуть /ready, каталог и админские списки.
const [open, setOpen] = useState(false)
const meQ = useQuery(meQueryOptions)
const isAdmin = Boolean(meQ.data?.is_admin)
@@ -86,24 +89,33 @@ export function SystemMonitorPopover() {
if (!res.ok) throw new Error('not ready')
return (await res.json()) as { ok?: boolean }
},
enabled: open,
refetchInterval: 30_000,
retry: false,
})
const catalogQ = useQuery({ ...catalogQueryOptions, refetchInterval: 30_000 })
const catalogQ = useQuery({
...catalogQueryOptions,
enabled: open,
refetchInterval: 30_000,
})
const usersQ = useQuery({
...usersQueryOptions,
enabled: isAdmin,
enabled: isAdmin && open,
retry: false,
refetchInterval: 30_000,
})
const oidcQ = useQuery({
...oidcClientsQueryOptions,
enabled: isAdmin,
enabled: isAdmin && open,
retry: false,
refetchInterval: 30_000,
})
const apiOk = readyQ.data?.ok === true || readyQ.isSuccess
const monitorFetched = readyQ.isFetched || catalogQ.isFetched
// До первого открытия данных нет — нейтральное состояние вместо ложной тревоги.
const apiOk = readyQ.isFetched
? readyQ.data?.ok === true || readyQ.isSuccess
: true
const appsCount = catalogQ.data?.apps.length ?? 0
const usersCount = isAdmin ? (usersQ.data?.length ?? 0) : null
const oidcCount = isAdmin ? (oidcQ.data?.length ?? 0) : null
@@ -163,10 +175,10 @@ export function SystemMonitorPopover() {
[apiOk, appsCount, disabledUsers, oidcCount, usersCount],
)
const spiking = metrics.some((m) => m.alert) || !apiOk
const spiking = monitorFetched && (metrics.some((m) => m.alert) || !apiOk)
return (
<Popover>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger
render={
<button
@@ -771,7 +771,6 @@ export function AdminUsersGrid({
const [filters, setFilters] = useState<Filter[]>(createDefaultFilters)
const [bulkRole, setBulkRole] = useState<BulkRole>('user')
const [filteredData, setFilteredData] = useState<AdminUser[]>(users)
const [filterLoading, setFilterLoading] = useState(false)
const isInitialLoad = useRef(true)
const lastAppliedActiveKey = useRef<string>(
serializeActiveFiltersKey(getActiveFilters(createDefaultFilters())),
@@ -851,16 +850,6 @@ export function AdminUsersGrid({
[users],
)
const simulateAsyncFiltering = useCallback(
async (newFilters: Filter[]) => {
setFilterLoading(true)
await new Promise((resolve) => setTimeout(resolve, 200))
setFilteredData(applyFilters(newFilters))
setFilterLoading(false)
},
[applyFilters],
)
const handleFiltersChange = useCallback(
(newFilters: Filter[]) => {
setFilters(newFilters)
@@ -870,9 +859,8 @@ export function AdminUsersGrid({
lastAppliedActiveKey.current = nextKey
setPagination((prev) => ({ ...prev, pageIndex: 0 }))
setRowSelection({})
void simulateAsyncFiltering(newFilters)
},
[simulateAsyncFiltering],
[],
)
useEffect(() => {
@@ -933,7 +921,7 @@ export function AdminUsersGrid({
.getSelectedRowModel()
.rows.map((row) => row.original.id)
const showClearButton = filters.length > 0
const gridLoading = isLoading || filterLoading
const gridLoading = isLoading
const handleClearSelection = useCallback(() => setRowSelection({}), [])
@@ -956,8 +944,7 @@ export function AdminUsersGrid({
)
setFilters(next)
setRowSelection({})
void simulateAsyncFiltering(next)
}, [simulateAsyncFiltering])
}, [])
return (
<TooltipProvider delay={200}>