xinyin025/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-08-10 13:21:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf(frontend): code-split heavy components to improve LCP

Browse Source 
Switch the inbounds-page modals, login page's theme switch, and the
Persian date picker to defineAsyncComponent. They're not needed on
first paint, so deferring them shrinks the initial bundle and lets
the LCP element render sooner.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
MHSanaei
2026-05-10 11:33:46 +02:00
parent f70e131dfe
commit 444b05cac9
3 changed files with 14 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/inbounds/InboundsPage.vue
+9 -8
View File
@@ -1,5 +1,5 @@
<script setup>
import { computed, onMounted, ref } from 'vue';
import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { Modal, message } from 'ant-design-vue';
import {
@@ -18,16 +18,17 @@ import AppSidebar from '@/components/AppSidebar.vue';
import CustomStatistic from '@/components/CustomStatistic.vue';
import { useNodeList } from '@/composables/useNodeList.js';
import InboundList from './InboundList.vue';
import InboundFormModal from './InboundFormModal.vue';
import ClientFormModal from './ClientFormModal.vue';
import ClientBulkModal from './ClientBulkModal.vue';
import InboundInfoModal from './InboundInfoModal.vue';
import QrCodeModal from './QrCodeModal.vue';
import TextModal from '@/components/TextModal.vue';
import PromptModal from '@/components/PromptModal.vue';
import { useInbounds } from './useInbounds.js';
import { useWebSocket } from '@/composables/useWebSocket.js';
const InboundFormModal = defineAsyncComponent(() => import('./InboundFormModal.vue'));
const ClientFormModal = defineAsyncComponent(() => import('./ClientFormModal.vue'));
const ClientBulkModal = defineAsyncComponent(() => import('./ClientBulkModal.vue'));
const InboundInfoModal = defineAsyncComponent(() => import('./InboundInfoModal.vue'));
const QrCodeModal = defineAsyncComponent(() => import('./QrCodeModal.vue'));
const TextModal = defineAsyncComponent(() => import('@/components/TextModal.vue'));
const PromptModal = defineAsyncComponent(() => import('@/components/PromptModal.vue'));
const { t } = useI18n();
const {
frontend/src/pages/login/LoginPage.vue
+3 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import { computed, defineAsyncComponent, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { UserOutlined, LockOutlined, KeyOutlined, SettingOutlined } from '@ant-design/icons-vue';
@@ -9,7 +9,8 @@ import {
currentTheme,
theme as themeState,
} from '@/composables/useTheme.js';
import ThemeSwitchLogin from '@/components/ThemeSwitchLogin.vue';
const ThemeSwitchLogin = defineAsyncComponent(() => import('@/components/ThemeSwitchLogin.vue'));
const { t } = useI18n();