Files
clash-verge-rev-lite/src/hooks/use-i18n.ts
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

46 lines
1.1 KiB
TypeScript

import { useState, useCallback } from "react";
import { useTranslation } from "react-i18next";
import { changeLanguage, supportedLanguages } from "@/services/i18n";
import { useVerge } from "./use-verge";
export const useI18n = () => {
const { i18n, t } = useTranslation();
const { patchVerge } = useVerge();
const [isLoading, setIsLoading] = useState(false);
const switchLanguage = useCallback(
async (language: string) => {
if (!supportedLanguages.includes(language)) {
console.warn(`Unsupported language: ${language}`);
return;
}
if (i18n.language === language) {
return;
}
setIsLoading(true);
try {
await changeLanguage(language);
if (patchVerge) {
await patchVerge({ language });
}
} catch (error) {
console.error("Failed to change language:", error);
} finally {
setIsLoading(false);
}
},
[i18n.language, patchVerge],
);
return {
currentLanguage: i18n.language,
supportedLanguages,
switchLanguage,
isLoading,
t,
};
};