From 76ce59549cb835a2ff3d046b39e07ad650b4ad78 Mon Sep 17 00:00:00 2001 From: jsers Date: Wed, 8 Jul 2026 00:31:00 +0800 Subject: [PATCH] refactor: convert page imports to React.lazy with Vite build-time restoration Replace eager static imports with React.lazy() across entry.tsx, routers/index.tsx, and App.tsx to reduce initial module loading in dev. Add two Vite plugins: - vite-plugin-dev-locale: loads only the active locale in serve mode to eliminate redundant language file requests - vite-plugin-lazy-eager: restores React.lazy back to static imports during build so prod bundles remain unaffected --- plugins/vite-plugin-dev-locale.ts | 42 +++++++ plugins/vite-plugin-lazy-eager.ts | 43 +++++++ src/App.tsx | 31 ++--- src/i18n.ts | 6 + src/pages/aiConfig/entry.tsx | 12 +- src/pages/alertCurEvent/entry.tsx | 3 +- src/pages/builtInComponents/entry.tsx | 8 +- src/pages/contacts/entry.tsx | 3 +- src/pages/embeddedDashboards/entry.tsx | 3 +- src/pages/embeddedProduct/entry.tsx | 5 +- src/pages/eventPipeline/entry.tsx | 9 +- src/pages/hosts/entry.tsx | 3 +- src/pages/logExplorer/entry.tsx | 6 +- src/pages/metricsBuiltin/entry.tsx | 3 +- src/pages/notificationChannels/entry.tsx | 7 +- src/pages/notificationRules/entry.tsx | 9 +- src/pages/notificationTemplates/entry.tsx | 3 +- src/routers/index.tsx | 133 +++++++++++++--------- vite.config.ts | 4 + 19 files changed, 234 insertions(+), 99 deletions(-) create mode 100644 plugins/vite-plugin-dev-locale.ts create mode 100644 plugins/vite-plugin-lazy-eager.ts diff --git a/plugins/vite-plugin-dev-locale.ts b/plugins/vite-plugin-dev-locale.ts new file mode 100644 index 000000000..b53f86276 --- /dev/null +++ b/plugins/vite-plugin-dev-locale.ts @@ -0,0 +1,42 @@ +/* + * 仅「开发（serve）」阶段生效：把各 locale/index.(ts|js) 中「非当前语言」的语言 import + * 就地替换为空对象，避免 dev 下每个 locale 目录都请求全部 5 种语言文件。 + * + * 背景：i18n 用 import.meta.glob(eager) 加载全部 locale/index，每个 index 又静态 + * "import xx from './'" 引入 5 种语言 → 一个目录 6 个请求，全站 700+。dev 实际只用 + * 一种语言，其余是浪费。 + * + * 转换示例（当前语言 = zh_CN）： + * import zh_HK from './zh_HK'; => const zh_HK = {}; + * import zh_CN from './zh_CN'; => （保留，真实加载） + * resources 对象仍引用这些标识符，结构不变，非当前语言为 {} 不会报错。 + * + * 当前语言由 VITE_DEV_LOCALE（默认 zh_CN）在启动时决定；prod 不受影响（apply: 'serve'）。 + * 遇到非标准写法（如深层路径的语言 import）自动跳过，回退为全量加载，无副作用。 + */ +const LANGS = ['zh_CN', 'en_US', 'zh_HK', 'ru_RU', 'ja_JP']; + +export default function devSingleLocale(activeLocale: string) { + const active = LANGS.includes(activeLocale) ? activeLocale : 'zh_CN'; + const importRe = /import\s+(\w+)\s+from\s+'\.\/(\w+)';/g; + + return { + name: 'dev-single-locale', + enforce: 'pre' as const, + apply: 'serve' as const, + transform(code: string, id: string) { + const clean = id.split('?')[0]; + if (!/\/(locale|locales)\/index\.(ts|js)$/.test(clean)) return null; + let changed = false; + const out = code.replace(importRe, (match, ident: string, lang: string) => { + if (LANGS.includes(lang) && lang !== active) { + changed = true; + return `const ${ident} = {};`; + } + return match; + }); + if (!changed) return null; + return { code: out, map: null }; + }, + }; +} diff --git a/plugins/vite-plugin-lazy-eager.ts b/plugins/vite-plugin-lazy-eager.ts new file mode 100644 index 000000000..bf74822ac --- /dev/null +++ b/plugins/vite-plugin-lazy-eager.ts @@ -0,0 +1,43 @@ +/** + * 仅在「生产构建」阶段，把用于优化 Vite dev 请求数的 `React.lazy(() => import('x'))` + * 还原为静态 `import`。 + * + * 背景：dev 下 Vite 原生 ESM「一个模块一个请求」，路由/页面若全部静态 import 会在登录页 + * 就拉起数千个模块。改为 React.lazy 后 dev 只按需加载。但生产已由 Rollup 打包，不存在 + * 「多请求」问题，业务希望产物保持懒加载改造前的形态（无额外按需 chunk、无路由级 Suspense）。 + * + * 因此本插件只在 `vite build` 时生效（apply: 'build'），把下面两种写法转回静态 import： + * const X = React.lazy(() => import('spec')); + * -> import X from 'spec'; + * const X = React.lazy(() => import('spec').then((m) => ({ default: m.Named }))); + * -> import { Named as X } from 'spec'; + * + * 仅作用于本次懒加载改造涉及的文件（各 entry.tsx、routers/index.tsx、App.tsx）， + * 不影响代码库中其它本就希望在生产也保持懒加载的 React.lazy 用法。 + */ +export default function lazyToEagerOnBuild() { + const shouldTransform = (id: string) => { + const clean = id.split('?')[0]; + return clean.endsWith('/entry.tsx') || clean.endsWith('/routers/index.tsx') || clean.endsWith('/src/App.tsx'); + }; + + // 具名导出：React.lazy(() => import('spec').then((m) => ({ default: m.Named }))) + const namedRe = + /const\s+(\w+)\s*=\s*React\.lazy\(\s*\(\)\s*=>\s*import\(\s*(['"])(.+?)\2\s*\)\s*\.then\(\s*\(\s*m\s*\)\s*=>\s*\(\s*\{\s*default:\s*m\.(\w+)\s*\}\s*\)\s*\)\s*\)\s*;/g; + // 默认导出：React.lazy(() => import('spec')) + const defaultRe = /const\s+(\w+)\s*=\s*React\.lazy\(\s*\(\)\s*=>\s*import\(\s*(['"])(.+?)\2\s*\)\s*\)\s*;/g; + + return { + name: 'lazy-to-eager-on-build', + enforce: 'pre' as const, + apply: 'build' as const, + transform(code: string, id: string) { + if (!shouldTransform(id) || !code.includes('React.lazy')) return null; + const out = code + .replace(namedRe, (_m, name, _q, spec, exported) => `import { ${exported} as ${name} } from '${spec}';`) + .replace(defaultRe, (_m, name, _q, spec) => `import ${name} from '${spec}';`); + if (out === code) return null; + return { code: out, map: null }; + }, + }; +} diff --git a/src/App.tsx b/src/App.tsx index 65ab2eb8f..00b80bba4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -25,8 +25,6 @@ import 'antd/dist/antd.less'; import { useTranslation } from 'react-i18next'; import _ from 'lodash'; -import TaskOutput from '@/pages/taskOutput'; -import TaskHostOutput from '@/pages/taskOutput/host'; import { getAuthorizedDatasourceCates, Cate } from '@/components/AdvancedWrap'; import { GetProfile } from '@/services/account'; import { getBusiGroups, getDatasourceBriefList, getMenuPerm, getInstallDate } from '@/services/common'; @@ -36,7 +34,6 @@ import { getCleanBusinessGroupIds, getDefaultBusiness, getVaildBusinessGroup } f import { IRawTimeRange } from '@/components/TimeRangePicker'; import { getN9eConfig } from '@/pages/siteSettings/services'; import { getDarkMode, updateDarkMode } from '@/utils/darkMode'; -import SharedDetail from '@/pages/event/DetailNG/SharedDetail'; import { AiChatProvider, AiChatContainer } from '@/components/AiChatNG'; import HocRenderer from './components/HocRenderer'; import HeaderMenu from './components/SideMenu'; @@ -50,6 +47,12 @@ import CustomerServiceFloatButton from 'plus:/components/CustomerServiceFloatBut import './App.less'; import './global.variable.less'; +// 顶层路由组件懒加载：SharedDetail 会连带引入事件详情 + 全部数据源插件注册表（近千个模块）， +// 只在 /share/alert-his-events 路由用到，改为懒加载后登录页等页面不再 eager 拉起这些依赖。 +const TaskOutput = React.lazy(() => import('@/pages/taskOutput')); +const TaskHostOutput = React.lazy(() => import('@/pages/taskOutput/host')); +const SharedDetail = React.lazy(() => import('@/pages/event/DetailNG/SharedDetail')); + interface IProfile { admin?: boolean; nickname: string; @@ -346,16 +349,18 @@ function App() { }} basename={basePrefix} > - - - - - <> - {location.pathname !== `${basePrefix}/out-of-service` && } - - - - + }> + + + + + <> + {location.pathname !== `${basePrefix}/out-of-service` && } + + + + + diff --git a/src/i18n.ts b/src/i18n.ts index c4198b2ac..e9a3eb4ae 100644 --- a/src/i18n.ts +++ b/src/i18n.ts @@ -26,6 +26,12 @@ let language = 'zh_CN'; if (localStorageLanguage && _.includes(languages, localStorageLanguage)) { language = localStorageLanguage; } +// 开发环境仅加载单一语言（见 plugins/vite-plugin-dev-locale），此处需与之对齐， +// 否则运行时语言与已加载语言不一致会显示成翻译 key。可用 VITE_DEV_LOCALE 指定，默认 zh_CN。 +if (import.meta.env.DEV) { + const devLocale = import.meta.env.VITE_DEV_LOCALE as string | undefined; + language = devLocale && _.includes(languages, devLocale) ? devLocale : 'zh_CN'; +} function getTranslations() { const translations: any = import.meta.glob('../src/**/{locale,locales}/index.(ts|js)', { eager: true }); diff --git a/src/pages/aiConfig/entry.tsx b/src/pages/aiConfig/entry.tsx index 0b5957734..9929c7ff8 100644 --- a/src/pages/aiConfig/entry.tsx +++ b/src/pages/aiConfig/entry.tsx @@ -1,16 +1,14 @@ import React from 'react'; import { PATH as agentPath } from './agents/constants'; -import AgentList from './agents/pages/List'; - import { PATH as llmConfigPath } from './llmConfigs/constants'; -import LLMConfigList from './llmConfigs/pages/List'; - import { PATH as skillPath } from './skills/constants'; -import SkillList from './skills/pages/List'; - import { PATH as mcpServerPath } from './mcpServers/constants'; -import MCPServerList from './mcpServers/pages/List'; + +const AgentList = React.lazy(() => import('./agents/pages/List')); +const LLMConfigList = React.lazy(() => import('./llmConfigs/pages/List')); +const SkillList = React.lazy(() => import('./skills/pages/List')); +const MCPServerList = React.lazy(() => import('./mcpServers/pages/List')); export default { routes: [ diff --git a/src/pages/alertCurEvent/entry.tsx b/src/pages/alertCurEvent/entry.tsx index d72e9350a..3a3a31b04 100644 --- a/src/pages/alertCurEvent/entry.tsx +++ b/src/pages/alertCurEvent/entry.tsx @@ -1,10 +1,11 @@ import React from 'react'; import { PATH } from './constants'; -import List from './pages/List'; import './style.less'; import './locale'; +const List = React.lazy(() => import('./pages/List')); + export default { routes: [ { diff --git a/src/pages/builtInComponents/entry.tsx b/src/pages/builtInComponents/entry.tsx index 8e6e4b72b..a7cf7b074 100644 --- a/src/pages/builtInComponents/entry.tsx +++ b/src/pages/builtInComponents/entry.tsx @@ -14,13 +14,15 @@ * limitations under the License. * */ +import React from 'react'; import { pathname } from './constants'; -import List from './List'; -import AlertDetail from './AlertRules/Detail'; -import DashboardDetail from './Dashboards/Detail'; import './locale'; import './style.less'; +const List = React.lazy(() => import('./List')); +const AlertDetail = React.lazy(() => import('./AlertRules/Detail')); +const DashboardDetail = React.lazy(() => import('./Dashboards/Detail')); + export default { routes: [ { diff --git a/src/pages/contacts/entry.tsx b/src/pages/contacts/entry.tsx index 8eb449091..d39cb5e7a 100644 --- a/src/pages/contacts/entry.tsx +++ b/src/pages/contacts/entry.tsx @@ -2,7 +2,8 @@ import React from 'react'; import './locale'; import { NS } from './constants'; -import List from './pages/List'; + +const List = React.lazy(() => import('./pages/List')); export default { routes: [ diff --git a/src/pages/embeddedDashboards/entry.tsx b/src/pages/embeddedDashboards/entry.tsx index 7051b2443..bb50c61b0 100644 --- a/src/pages/embeddedDashboards/entry.tsx +++ b/src/pages/embeddedDashboards/entry.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import Audits from './index'; import './style.less'; import './locale'; +const Audits = React.lazy(() => import('./index')); + export default { routes: [ { diff --git a/src/pages/embeddedProduct/entry.tsx b/src/pages/embeddedProduct/entry.tsx index 2928422f2..a0d1ed0fe 100644 --- a/src/pages/embeddedProduct/entry.tsx +++ b/src/pages/embeddedProduct/entry.tsx @@ -1,10 +1,11 @@ import React from 'react'; import { PATH, DETAIL_PATH } from './constants'; -import List from './pages/List'; -import Detail from './pages/Detail'; import './locale'; +const List = React.lazy(() => import('./pages/List')); +const Detail = React.lazy(() => import('./pages/Detail')); + export default { routes: [ { diff --git a/src/pages/eventPipeline/entry.tsx b/src/pages/eventPipeline/entry.tsx index 807368864..786285f9d 100644 --- a/src/pages/eventPipeline/entry.tsx +++ b/src/pages/eventPipeline/entry.tsx @@ -1,12 +1,13 @@ import React from 'react'; import { NS } from './constants'; -import List from './pages/ListWithPageLayout'; -import Edit from './pages/EditWithPageLayout'; -import Executions from './pages/Executions'; -import ExecutionDetail from './pages/Executions/DetailWithPageLayout'; import './locale'; +const List = React.lazy(() => import('./pages/ListWithPageLayout')); +const Edit = React.lazy(() => import('./pages/EditWithPageLayout')); +const Executions = React.lazy(() => import('./pages/Executions')); +const ExecutionDetail = React.lazy(() => import('./pages/Executions/DetailWithPageLayout')); + export default { routes: [ { diff --git a/src/pages/hosts/entry.tsx b/src/pages/hosts/entry.tsx index 3ab1aba8d..db20dbee0 100644 --- a/src/pages/hosts/entry.tsx +++ b/src/pages/hosts/entry.tsx @@ -1,10 +1,11 @@ import React from 'react'; import { PATH } from './constants'; -import List from './pages/List'; import './style.less'; import './locale'; +const List = React.lazy(() => import('./pages/List')); + export default { routes: [ { diff --git a/src/pages/logExplorer/entry.tsx b/src/pages/logExplorer/entry.tsx index 7d6b58022..90fe5d02c 100644 --- a/src/pages/logExplorer/entry.tsx +++ b/src/pages/logExplorer/entry.tsx @@ -1,10 +1,14 @@ +import React from 'react'; import { PATHNAME } from './constants'; -import Index from './index'; import './locale'; import './style.less'; +// 页面本体懒加载：entry 会被 import.meta.glob({ eager: true }) 在启动时同步加载， +// 若直接静态 import ./index 会把整棵页面树（含数据源插件）在登录页就拉起。 +const Index = React.lazy(() => import('./index')); + export default { routes: [ { diff --git a/src/pages/metricsBuiltin/entry.tsx b/src/pages/metricsBuiltin/entry.tsx index 42bd01de9..906295e7a 100644 --- a/src/pages/metricsBuiltin/entry.tsx +++ b/src/pages/metricsBuiltin/entry.tsx @@ -16,10 +16,11 @@ */ import React from 'react'; import { pathname } from './constants'; -import List from './List'; import './locale'; import './style.less'; +const List = React.lazy(() => import('./List')); + export default { routes: [ { diff --git a/src/pages/notificationChannels/entry.tsx b/src/pages/notificationChannels/entry.tsx index 306ea1d88..b0286bf2c 100644 --- a/src/pages/notificationChannels/entry.tsx +++ b/src/pages/notificationChannels/entry.tsx @@ -2,9 +2,10 @@ import React from 'react'; import './locale'; import { NS } from './constants'; -import ListNG from './pages/ListNG'; -import Add from './pages/Add'; -import Edit from './pages/Edit'; + +const ListNG = React.lazy(() => import('./pages/ListNG')); +const Add = React.lazy(() => import('./pages/Add')); +const Edit = React.lazy(() => import('./pages/Edit')); export default { routes: [ diff --git a/src/pages/notificationRules/entry.tsx b/src/pages/notificationRules/entry.tsx index 31dd942e9..b6acea027 100644 --- a/src/pages/notificationRules/entry.tsx +++ b/src/pages/notificationRules/entry.tsx @@ -1,13 +1,14 @@ import React from 'react'; import { NS } from './constants'; -import List from './pages/List'; -import Add from './pages/Add'; -import Edit from './pages/Edit'; -import Detail from './pages/Detail'; import './style.less'; import './locale'; +const List = React.lazy(() => import('./pages/List')); +const Add = React.lazy(() => import('./pages/Add')); +const Edit = React.lazy(() => import('./pages/Edit')); +const Detail = React.lazy(() => import('./pages/Detail')); + export default { routes: [ { diff --git a/src/pages/notificationTemplates/entry.tsx b/src/pages/notificationTemplates/entry.tsx index 8eb449091..d39cb5e7a 100644 --- a/src/pages/notificationTemplates/entry.tsx +++ b/src/pages/notificationTemplates/entry.tsx @@ -2,7 +2,8 @@ import React from 'react'; import './locale'; import { NS } from './constants'; -import List from './pages/List'; + +const List = React.lazy(() => import('./pages/List')); export default { routes: [ diff --git a/src/routers/index.tsx b/src/routers/index.tsx index ee19b72c8..3e4ca067b 100644 --- a/src/routers/index.tsx +++ b/src/routers/index.tsx @@ -15,68 +15,81 @@ * */ import React, { useEffect, useContext } from 'react'; +import { Spin } from 'antd'; import { Switch, Route, useLocation, Redirect, useHistory, matchPath } from 'react-router-dom'; import querystring from 'query-string'; import _ from 'lodash'; import { getMenuPerm } from '@/services/common'; import { IS_ENT } from '@/utils/constant'; import { CommonStateContext } from '@/App'; -import Page403 from '@/pages/notFound/Page403'; -import OutOfService from '@/pages/notFound/OutOfService'; -import NotFound from '@/pages/notFound'; -import Login from '@/pages/login'; -import Overview from '@/pages/login/overview'; -import LoginCallback from '@/pages/loginCallback'; -import LoginCallbackCAS from '@/pages/loginCallback/cas'; -import LoginCallbackOAuth from '@/pages/loginCallback/oauth'; -import LoginCallbackCustom from '@/pages/loginCallback/Custom'; -import LoginCallbackDingTalk from '@/pages/loginCallback/DingTalk'; -import LoginCallbackFeishu from '@/pages/loginCallback/Feishu'; -import OAuthConsent from '@/pages/oauthConsent'; -import AlertRules, { Add as AlertRuleAdd, Edit as AlertRuleEdit } from '@/pages/alertRules'; -import Profile from '@/pages/account/profile'; -import { List as Dashboard, Detail as DashboardDetail, Share as DashboardShare } from '@/pages/dashboard'; -import { getDefaultThemeMode } from '@/pages/dashboard/Detail/utils'; -import Chart from '@/pages/chart'; -import Groups from '@/pages/user/groups'; -import Users from '@/pages/user/users'; -import Business from '@/pages/user/business'; -import { Metric as MetricExplore, Log as LogExplore } from '@/pages/explorer'; -import IndexPatterns from '@/pages/log/IndexPatterns'; -import ObjectExplore from '@/pages/monitor/object'; -import Shield, { Add as AddShield, Edit as ShieldEdit } from '@/pages/warning/shield'; -import Subscribe, { Add as SubscribeAdd, Edit as SubscribeEdit } from '@/pages/warning/subscribe'; -import Event from '@/pages/event'; -import EventDetail from '@/pages/event/detail'; -import historyEvents from '@/pages/historyEvents'; -import Targets from '@/pages/targets'; -import Demo from '@/pages/demo'; -import LogViewerTestPage from '@/pages/logExplorer/LogViewerTestPage'; -import TaskTpl from '@/pages/taskTpl'; -import TaskTplAdd from '@/pages/taskTpl/add'; -import TaskTplDetail from '@/pages/taskTpl/detail'; -import TaskTplModify from '@/pages/taskTpl/modify'; -import TaskTplClone from '@/pages/taskTpl/clone'; -import Task from '@/pages/task'; -import TaskAdd from '@/pages/task/add'; -import TaskResult from '@/pages/task/result'; -import TaskDetail from '@/pages/task/detail'; -import Version from '@/pages/help/version'; -import Servers from '@/pages/help/servers'; -import Datasource, { Form as DatasourceAdd } from '@/pages/datasource'; -import RecordingRule, { Add as RecordingRuleAdd, Edit as RecordingRuleEdit } from '@/pages/recordingRules'; -import TraceExplorer, { Dependencies as TraceDependencies } from '@/pages/traceCpt/Explorer'; -import Permissions from '@/pages/permissions'; -import SSOConfigs from '@/pages/help/SSOConfigs'; -import NotificationTpls from '@/pages/help/NotificationTpls'; -import NotificationSettings from '@/pages/help/NotificationSettings'; -import MigrateDashboards from '@/pages/help/migrate'; -import VariableConfigs from '@/pages/variableConfigs'; -import SiteSettings from '@/pages/siteSettings'; -import Landing from '@/pages/landing'; +// 路由页面统一懒加载：避免任意一个页面（如登录页）就把整棵页面依赖图 eager 拉起 +const Page403 = React.lazy(() => import('@/pages/notFound/Page403')); +const OutOfService = React.lazy(() => import('@/pages/notFound/OutOfService')); +const NotFound = React.lazy(() => import('@/pages/notFound')); +const Login = React.lazy(() => import('@/pages/login')); +const Overview = React.lazy(() => import('@/pages/login/overview')); +const LoginCallback = React.lazy(() => import('@/pages/loginCallback')); +const LoginCallbackCAS = React.lazy(() => import('@/pages/loginCallback/cas')); +const LoginCallbackOAuth = React.lazy(() => import('@/pages/loginCallback/oauth')); +const LoginCallbackCustom = React.lazy(() => import('@/pages/loginCallback/Custom')); +const LoginCallbackDingTalk = React.lazy(() => import('@/pages/loginCallback/DingTalk')); +const LoginCallbackFeishu = React.lazy(() => import('@/pages/loginCallback/Feishu')); +const OAuthConsent = React.lazy(() => import('@/pages/oauthConsent')); +const AlertRules = React.lazy(() => import('@/pages/alertRules')); +const AlertRuleAdd = React.lazy(() => import('@/pages/alertRules').then((m) => ({ default: m.Add }))); +const AlertRuleEdit = React.lazy(() => import('@/pages/alertRules').then((m) => ({ default: m.Edit }))); +const Profile = React.lazy(() => import('@/pages/account/profile')); +// 直接指向子模块，避免经过 @/pages/dashboard 桶文件把 List/Detail/Share 打进同一个 chunk +const Dashboard = React.lazy(() => import('@/pages/dashboard/List')); +const DashboardDetail = React.lazy(() => import('@/pages/dashboard/Detail')); +const DashboardShare = React.lazy(() => import('@/pages/dashboard/Share')); +const Chart = React.lazy(() => import('@/pages/chart')); +const Groups = React.lazy(() => import('@/pages/user/groups')); +const Users = React.lazy(() => import('@/pages/user/users')); +const Business = React.lazy(() => import('@/pages/user/business')); +const MetricExplore = React.lazy(() => import('@/pages/explorer/Metric')); +const LogExplore = React.lazy(() => import('@/pages/explorer/Log')); +const IndexPatterns = React.lazy(() => import('@/pages/log/IndexPatterns')); +const ObjectExplore = React.lazy(() => import('@/pages/monitor/object')); +const Shield = React.lazy(() => import('@/pages/warning/shield')); +const AddShield = React.lazy(() => import('@/pages/warning/shield').then((m) => ({ default: m.Add }))); +const ShieldEdit = React.lazy(() => import('@/pages/warning/shield').then((m) => ({ default: m.Edit }))); +const Subscribe = React.lazy(() => import('@/pages/warning/subscribe')); +const SubscribeAdd = React.lazy(() => import('@/pages/warning/subscribe').then((m) => ({ default: m.Add }))); +const SubscribeEdit = React.lazy(() => import('@/pages/warning/subscribe').then((m) => ({ default: m.Edit }))); +const EventDetail = React.lazy(() => import('@/pages/event/detail')); +const historyEvents = React.lazy(() => import('@/pages/historyEvents')); +const Demo = React.lazy(() => import('@/pages/demo')); +const LogViewerTestPage = React.lazy(() => import('@/pages/logExplorer/LogViewerTestPage')); +const TaskTpl = React.lazy(() => import('@/pages/taskTpl')); +const TaskTplAdd = React.lazy(() => import('@/pages/taskTpl/add')); +const TaskTplDetail = React.lazy(() => import('@/pages/taskTpl/detail')); +const TaskTplModify = React.lazy(() => import('@/pages/taskTpl/modify')); +const TaskTplClone = React.lazy(() => import('@/pages/taskTpl/clone')); +const Task = React.lazy(() => import('@/pages/task')); +const TaskAdd = React.lazy(() => import('@/pages/task/add')); +const TaskResult = React.lazy(() => import('@/pages/task/result')); +const TaskDetail = React.lazy(() => import('@/pages/task/detail')); +const Version = React.lazy(() => import('@/pages/help/version')); +const Servers = React.lazy(() => import('@/pages/help/servers')); +const Datasource = React.lazy(() => import('@/pages/datasource')); +const DatasourceAdd = React.lazy(() => import('@/pages/datasource').then((m) => ({ default: m.Form }))); +const RecordingRule = React.lazy(() => import('@/pages/recordingRules')); +const RecordingRuleAdd = React.lazy(() => import('@/pages/recordingRules').then((m) => ({ default: m.Add }))); +const RecordingRuleEdit = React.lazy(() => import('@/pages/recordingRules').then((m) => ({ default: m.Edit }))); +const TraceExplorer = React.lazy(() => import('@/pages/traceCpt/Explorer')); +const TraceDependencies = React.lazy(() => import('@/pages/traceCpt/Explorer').then((m) => ({ default: m.Dependencies }))); +const Permissions = React.lazy(() => import('@/pages/permissions')); +const SSOConfigs = React.lazy(() => import('@/pages/help/SSOConfigs')); +const NotificationTpls = React.lazy(() => import('@/pages/help/NotificationTpls')); +const NotificationSettings = React.lazy(() => import('@/pages/help/NotificationSettings')); +const MigrateDashboards = React.lazy(() => import('@/pages/help/migrate')); +const VariableConfigs = React.lazy(() => import('@/pages/variableConfigs')); +const SiteSettings = React.lazy(() => import('@/pages/siteSettings')); +const Landing = React.lazy(() => import('@/pages/landing')); import { dynamicPackages, Entry, dynamicPages } from '@/utils'; // @ts-ignore -import { Jobs as StrategyBrain } from 'plus:/datasource/anomaly'; +const StrategyBrain = React.lazy(() => import('plus:/datasource/anomaly').then((m) => ({ default: m.Jobs }))); // @ts-ignore import plusLoader from 'plus:/utils/loader'; // @ts-ignore @@ -152,7 +165,14 @@ export default function Content() { return (
- + + +
+ } + > + {import.meta.env.DEV && } @@ -248,7 +268,8 @@ export default function Content() { - + + ); } diff --git a/vite.config.ts b/vite.config.ts index 9033e9dd5..b74e39ef9 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -18,6 +18,8 @@ import { defineConfig, loadEnv } from 'vite'; import { md } from './plugins/md'; import plusResolve from './plugins/plusResolve'; import prefixPlugin from './plugins/vite-plugin-prefix'; +import lazyToEagerOnBuild from './plugins/vite-plugin-lazy-eager'; +import devSingleLocale from './plugins/vite-plugin-dev-locale'; import getFontFamilyByEnv from './src/utils/getFontFamilyByEnv'; import react from '@vitejs/plugin-react'; import svgr from 'vite-plugin-svgr'; @@ -55,6 +57,8 @@ export default defineConfig(({ mode }) => { return { base: baseName + '/', plugins: [ + lazyToEagerOnBuild(), + devSingleLocale(env.VITE_DEV_LOCALE || 'zh_CN'), react(), svgr({ svgrOptions: {