Files
clash-proxy/src/main.tsx
Tunglies 0daa8720cd feat: implement i18n lazy loading optimization
🚀 Performance improvements:
- Replace static language imports with dynamic imports
- Load only current language on startup instead of all 13 languages
- Implement on-demand loading when switching languages

📦 Bundle optimization:
- Reduce initial bundle size by avoiding preloading all language files
- Add resource caching to prevent reloading same language
- Support all 13 languages: en, ru, zh, fa, tt, id, ar, ko, tr, de, es, jp, zhtw

🔧 Technical changes:
- Convert i18n.ts to use dynamic import() for language resources
- Add async initializeLanguage() for app startup
- Create useI18n hook for language management with loading states
- Update main.tsx for async language initialization
- Fix language display labels in settings dropdown
- Maintain backward compatibility with existing language system

 Fixed issues:
- Resolve infinite loop in React components
- Fix missing language labels in settings UI
- Prevent circular dependencies in language loading
- Add proper error handling and fallback mechanisms
2025-09-06 14:05:36 +08:00

92 lines
2.6 KiB
TypeScript

/// <reference types="vite/client" />
/// <reference types="vite-plugin-svgr/client" />
import "./assets/styles/index.scss";
import { ResizeObserver } from "@juggle/resize-observer";
if (!window.ResizeObserver) {
window.ResizeObserver = ResizeObserver;
}
import React from "react";
import { createRoot } from "react-dom/client";
import { ComposeContextProvider } from "foxact/compose-context-provider";
import { BrowserRouter } from "react-router-dom";
import { BaseErrorBoundary } from "./components/base";
import Layout from "./pages/_layout";
import { initializeLanguage } from "./services/i18n";
import {
LoadingCacheProvider,
ThemeModeProvider,
UpdateStateProvider,
} from "./services/states";
import { AppDataProvider } from "./providers/app-data-provider";
const mainElementId = "root";
const container = document.getElementById(mainElementId);
if (!container) {
throw new Error(
`No container '${mainElementId}' found to render application`,
);
}
document.addEventListener("keydown", (event) => {
// Disable WebView keyboard shortcuts
const disabledShortcuts =
["F5", "F7"].includes(event.key) ||
(event.altKey && ["ArrowLeft", "ArrowRight"].includes(event.key)) ||
((event.ctrlKey || event.metaKey) &&
["F", "G", "H", "J", "P", "Q", "R", "U"].includes(
event.key.toUpperCase(),
));
if (disabledShortcuts) {
event.preventDefault();
}
});
const initializeApp = async () => {
try {
await initializeLanguage("zh");
const contexts = [
<ThemeModeProvider key="theme" />,
<LoadingCacheProvider key="loading" />,
<UpdateStateProvider key="update" />,
];
const root = createRoot(container);
root.render(
<React.StrictMode>
<ComposeContextProvider contexts={contexts}>
<BaseErrorBoundary>
<AppDataProvider>
<BrowserRouter>
<Layout />
</BrowserRouter>
</AppDataProvider>
</BaseErrorBoundary>
</ComposeContextProvider>
</React.StrictMode>,
);
} catch (error) {
console.error("[main.tsx] 应用初始化失败:", error);
const root = createRoot(container);
root.render(
<div style={{ padding: "20px", color: "red" }}>
: {error instanceof Error ? error.message : String(error)}
</div>,
);
}
};
initializeApp();
// 错误处理
window.addEventListener("error", (event) => {
console.error("[main.tsx] 全局错误:", event.error);
});
window.addEventListener("unhandledrejection", (event) => {
console.error("[main.tsx] 未处理的Promise拒绝:", event.reason);
});