mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
## Summary
- Implement dynamic imports for internationalization (i18n) locale files
to reduce initial bundle size
- Only load English locale eagerly as default/fallback, load other
locales on-demand
- Apply code splitting to both main ComfyUI frontend and desktop-ui
applications
## Technical Details
- **Before**: All locale files (main.json, nodeDefs.json, commands.json,
settings.json) for all 9 languages were bundled in the initial
JavaScript bundle
- **After**: Only English locale files are included in initial bundle,
other locales are loaded dynamically when needed
- Implemented `loadLocale()` function that uses dynamic imports with
`Promise.all()` for efficient parallel loading
- Added locale tracking with `loadedLocales` Set to prevent duplicate
loading
- Updated both `src/i18n.ts` and `apps/desktop-ui/src/i18n.ts` with
consistent implementation
## Bundle Size Impact
This change significantly reduces the initial bundle size by removing ~8
languages worth of JSON locale data from the main bundle. Locale files
are now loaded on-demand only when users switch languages.
## Implementation
- Uses dynamic imports: `import('./locales/[locale]/[file].json')`
- Maintains backward compatibility with existing locale switching
mechanism
- Graceful error handling for unsupported locales
- No breaking changes to the public API
## Test plan
- [x] Verify initial load only includes English locale
- [x] Test dynamic locale loading when switching languages in settings
- [x] Confirm fallback behavior for unsupported locales
- [x] Validate both web and desktop-ui applications work correctly
🤖 Generated with [Claude Code](https://claude.ai/code)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6076-feat-implement-dynamic-imports-for-locale-code-splitting-28d6d73d36508189ae0ef060804a5cee)
by [Unito](https://www.unito.io)
---------
Co-authored-by: Claude <noreply@anthropic.com>
76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import type { KnipConfig } from 'knip'
|
|
|
|
const config: KnipConfig = {
|
|
workspaces: {
|
|
'.': {
|
|
entry: [
|
|
'{build,scripts}/**/*.{js,ts}',
|
|
'src/assets/css/style.css',
|
|
'src/main.ts',
|
|
'src/scripts/ui/menu/index.ts',
|
|
'src/types/index.ts'
|
|
],
|
|
project: ['**/*.{js,ts,vue}', '*.{js,ts,mts}']
|
|
},
|
|
'apps/desktop-ui': {
|
|
entry: ['src/main.ts', 'src/i18n.ts'],
|
|
project: ['src/**/*.{js,ts,vue}', '*.{js,ts,mts}']
|
|
},
|
|
'packages/tailwind-utils': {
|
|
project: ['src/**/*.{js,ts}']
|
|
},
|
|
'packages/design-system': {
|
|
entry: ['src/**/*.ts'],
|
|
project: ['src/**/*.{js,ts}', '*.{js,ts,mts}']
|
|
},
|
|
'packages/registry-types': {
|
|
project: ['src/**/*.{js,ts}']
|
|
}
|
|
},
|
|
ignoreBinaries: ['python3'],
|
|
ignoreDependencies: [
|
|
// Weird importmap things
|
|
'@iconify/json',
|
|
'@primeuix/forms',
|
|
'@primeuix/styled',
|
|
'@primeuix/utils',
|
|
'@primevue/icons',
|
|
// Dev
|
|
'@trivago/prettier-plugin-sort-imports'
|
|
],
|
|
ignore: [
|
|
// Auto generated manager types
|
|
'src/workbench/extensions/manager/types/generatedManagerTypes.ts',
|
|
'packages/registry-types/src/comfyRegistryTypes.ts',
|
|
// Used by a custom node (that should move off of this)
|
|
'src/scripts/ui/components/splitButton.ts'
|
|
],
|
|
compilers: {
|
|
// https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199
|
|
css: (text: string) =>
|
|
[...text.replaceAll('plugin', 'import').matchAll(/(?<=@)import[^;]+/g)]
|
|
.map((match) => match[0].replace(/url\(['"]?([^'"()]+)['"]?\)/, '$1'))
|
|
.join('\n')
|
|
},
|
|
vite: {
|
|
config: ['vite?(.*).config.mts']
|
|
},
|
|
vitest: {
|
|
config: ['vitest?(.*).config.ts'],
|
|
entry: [
|
|
'**/*.{bench,test,test-d,spec}.?(c|m)[jt]s?(x)',
|
|
'**/__mocks__/**/*.[jt]s?(x)'
|
|
]
|
|
},
|
|
playwright: {
|
|
config: ['playwright?(.*).config.ts'],
|
|
entry: ['**/*.@(spec|test).?(c|m)[jt]s?(x)', 'browser_tests/**/*.ts']
|
|
},
|
|
tags: [
|
|
'-knipIgnoreUnusedButUsedByCustomNodes',
|
|
'-knipIgnoreUnusedButUsedByVueNodesBranch'
|
|
]
|
|
}
|
|
|
|
export default config
|